I'm starting with vuejs and using bootstrat. I dont know how to differentiate the buttons using the props id inside eg. element id and data-bs-target

Question

In php im used to iterate bootstrap buttons echoing variables inside elements ids, something like

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

i do that for the element id, data-bs-target, aria-controls, and aria-labelledby when i use accordion buttons, however i don't know how to pass the prop inside those element's attributes.

Here's what i had in mind for the component

<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

You can use dynamic attribute by add a colon before : or v-bind:, And use template string to concat the static string with dynamic id

For example

: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>

Fore more details you can have a look at Attribute Binding in Vue docs