When working with PHP, I am accustomed to iterating Bootstrap buttons and echoing variables inside element IDs. For example:
<button id="btn<? echo $i; ?>"/>
I do this for the element ID, data-bs-target, aria-controls, and aria-labelledby when using accordion buttons. However, I am unsure of how to pass props inside those elements' attributes.
Here is 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>