How to use select box option in vue?-CodePudding

I have implemented select box in vue like this:

<select name="count" @change="change($event)">
  <option value="a">one</option>
  <option value="b">two</option>
  <option value="c">three</option>
</select>

I know that if you want to get the selected value from the script, you can receive the event and do event.target.value.

How can I get one,two,three values instead of a,b,c values?

CodePudding user response：

You can get the text from the selected option like so,

  methods:{
    change: function(e){
        var id = e.target.value;
        var name = e.target.options[e.target.options.selectedIndex].text;
        console.log('id ',id );
        console.log('name ',name );
    },


<select name="count" @change="change($event)">
   <option value="a">one</option>
   <option value="b">two</option>
   <option value="c">three</option>
</select>

CodePudding user response：

The <select> uses the <option> label (the inner text) as the value if the <option> has no value attribute, so you could just remove the value binding:

<select name="count" @change="change($event)">
  <option>one</option>
  <option>two</option>
  <option>three</option>
</select>

demo