I am currently using the most recent version of Bootstrap v5.2 and Vue 3 (for learning purposes).
While searching on Stackoverflow, I came across a similar question, but it was related to an older Bootstrap version.
In my project, I have a select element and I want to incorporate the id from my v-for loop as a badge (Referencing: https://getbootstrap.com/docs/5.2/components/badge/#pill-badges) in front of each item text in the dropdown menu.
This is the code snippet:
<div class="row mt-3">
<div class="col-12">
<span>Select with Badge</span>
<select class="form-select" v-model="test_select_badge">
<option v-for="element in select_array" :key="element.id" :value="element.id">
<span class="badge text-bg-primary me-2">{{element.id}}</span>{{element.text}}
</option>
</select>
</div>
</div>
However, this setup is not functioning as expected. Can anyone provide guidance on how to achieve my objective? Thank you.