Get text from select element using vue 2, when options has value attribute

Question

I have a select element within a vue component that looks like this:

<template>
    <select v-model="item.value" >
        <option value="1">A</option>
        <option value="2">B</option>
    </select>
    <div>
        You selected {{item.text}} with a value of {{item.value}}
    <div>
</template>
<script>
    export default {
        data() {
            return {
                item: {
                    text: '',
                    value: 0
                }
            }
        }
    }
</script>

If I make a selection, on A, I get a value of 1, if I make a selection on B. I get a value of 2. So item.value will be populated. How do I fill up item.text?

If I remove the value attribute from the options, I get the answer, but now my value wouldn't be populated.

tony19 · Accepted Answer · 2022-07-15 02:11:31Z

2

I'd recommend using an array of objects that hold both the value and text for each <option>. For example

data() {
  return {
    // ...
    options: [
      { value: 1, text: 'A' },
      { value: 2, text: 'B' }
    ]
  }
}

Then you can use a v-for to iterate this list and simply bind the selected item with v-model

<select v-model="item">
  <option v-for="opt in options" :key="opt.value" :value="opt">
    {{opt.text}}
  </option>
</select>

See https://v2.vuejs.org/v2/guide/forms.html#Select-Options

edited Jul 15, 2022 at 2:11

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 16, 2018 at 4:14

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sksallaj Over a year ago

That's such a weird work around, I see why this works though, the value attribute on each option gets an object rather than the value, and when you select a model, it selects that object. I'm really not a fan of this, but at least it works. Thanks!

Collectives™ on Stack Overflow

Get text from select element using vue 2, when options has value attribute

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related