I'm starting with vuejs and using bootstrat. I dont know how to differentiate the buttons using-CodePudding

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 >
      <div >
         <h2  id="heading{{id}}">
            <button  type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{id}}" aria-expanded="false" aria-controls="collapse{{id}}">
               <div > {{company}} </div>
               <div > {{dates}} </div>
               <div > {{position}} </div>
            </button>
         </h2>
         <div id="collapse{{id}}"  aria-labelledby="heading{{id}}" data-bs-parent="#accordionExample" style="">
            <div >
               <p> {{desc}} </p>
            </div>
         </div>
      </div>
   </div>
</template>

<style scoped>

</style>

CodePudding user response：

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 >
      <div >
         <h2  :id="`heading-${id}`">
            <button  type="button" data-bs-toggle="collapse" :data-bs-target="`#collapse-${id}`" aria-expanded="false" :aria-controls="`collapse-${id}`">
               <div > {{company}} </div>
               <div > {{dates}} </div>
               <div > {{position}} </div>
            </button>
         </h2>
         <div :id="`collapse-${id}`"  :aria-labelledby="`heading-${id}`" data-bs-parent="#accordionExample" style="">
            <div >
               <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