Home  >  Q&A  >  body text

How to pass key as select option value in v-for when changed (VueJS)

I'm using Vue 3 and Bootstrap 5.

I have a select with multiple options. Now I'm displaying my option.TEXT and when I change something, this value will also be passed into my method. But when I change something, I want to pass key (option.ID) .

But I also want my v-model to be my option.ID but show my option.TEXT.

How to achieve this without checking the method itself.

choose:

<select class="form-select" v-model="value" @change="get_key()">
    <option v-for="option in options" :key="option.ID">
        {{ option.TEXT }}
    </option>
</select>

Option array:

[
  {  "ID": 1,
     "TEXT": "One"
  },
  {  "ID": 2,
     "TEXT": "Two"
  },
  {  "ID": 3,
     "TEXT": "Three"
  },
]


P粉916553895P粉916553895272 days ago630

reply all(1)I'll reply

  • P粉848442185

    P粉8484421852023-11-18 00:32:51

    option The property value should be bound to option.ID:

    <select class="form-select" v-model="value" @change="get_key()">
        <option v-for="option in options" :key="option.ID" :value="option.ID">
            {{ option.TEXT }}
        </option>
    </select>
    

    reply
    0
  • Cancelreply