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