add badges to select in bootstrap (v5.2)-CodePudding

I'm working with the latest version of Bootstrap v5.2 and Vue 3 (just for understanding).

I've found a similar question on Stackoverflow but this was with an older version of Bootstrap.

I have a select and I want to add my id of my element from my v-for as a badge (Documentation: https://getbootstrap.com/docs/5.2/components/badge/#pill-badges) in front of the upcoming text of my element.

My code:

<div >
  <div >
    <span>Select with Badge</span>
    <select  v-model="test_select_badge">
      <option v-for="element in select_array" :key="element.id" :value="element.id">
        <span >{{element.id}}</span>{{element.text}}
      </option>
    </select>
  </div>
</div>

But this is not working out. How can I achieve my goal? Thank You.

CodePudding user response：

I've used an dropdown and desigend it like a select. Than it worked out for me.