我从 vuejs 开始并使用 bootstrat。 我不知道如何使用里面的道具 id 来区分按钮，例如。 元素 id 和 data-bs-target

Question

在 php 中，我用于迭代引导按钮，以在元素 ID 内回显变量，例如

<button id="btn<? echo $i; ?>"/>

当我使用手风琴按钮时，我对元素 id、data-bs-target、aria-controls 和 aria-labelledby 执行此操作，但是我不知道如何在这些元素的属性中传递道具。

这是我对组件的想法

<script setup>
   defineProps(['id','company','dates','position','desc'])
</script>

<template>
   <div class="experience">
      <div class="accordion-item">
         <h2 class="accordion-header" id="heading{{id}}">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{id}}" aria-expanded="false" aria-controls="collapse{{id}}">
               <div class="col-3"> {{company}} </div>
               <div class="col-5"> {{dates}} </div>
               <div class="col-3"> {{position}} </div>
            </button>
         </h2>
         <div id="collapse{{id}}" class="accordion-collapse collapse" aria-labelledby="heading{{id}}" data-bs-parent="#accordionExample" style="">
            <div class="accordion-body">
               <p> {{desc}} </p>
            </div>
         </div>
      </div>
   </div>
</template>

<style scoped>

</style>

Answer 1

您可以通过在:或v-bind:之前添加冒号来使用动态属性，并使用模板字符串将 static 字符串与动态id连接起来

例如

:id="`heading-${id}`"

<script setup>
   defineProps(['id','company','dates','position','desc'])
</script>

<template>
   <div class="experience">
      <div class="accordion-item">
         <h2 class="accordion-header" :id="`heading-${id}`">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" :data-bs-target="`#collapse-${id}`" aria-expanded="false" :aria-controls="`collapse-${id}`">
               <div class="col-3"> {{company}} </div>
               <div class="col-5"> {{dates}} </div>
               <div class="col-3"> {{position}} </div>
            </button>
         </h2>
         <div :id="`collapse-${id}`" class="accordion-collapse collapse" :aria-labelledby="`heading-${id}`" data-bs-parent="#accordionExample" style="">
            <div class="accordion-body">
               <p> {{desc}} </p>
            </div>
         </div>
      </div>
   </div>
</template>

<style scoped>

</style>

有关更多详细信息，您可以查看Vue 文档中的属性绑定