如何在Vue JS中获得select标签的值

Question

I'm learning the Vue JS and I have a problem.

I want to get the value of the selected option.

But I can't.

I tried to search on Google but I can't find.

This is my sample code.

 var vue = new Vue({ el: '#app', methods: { changeOption: function(){ console.log('How can I get the value of selected option?'); } } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script> <div id="app"> <select v-on:change="changeOption()"> <option>1</option> <option>2</option> </select> </div> 

Answer 1

You can use v-model directive.

 var vue = new Vue({ el: '#app', data:{ selectedOption : null }, methods: { changeOption: function(){ console.log(this.selectedOption); } } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script> <div id="app"> <select v-model="selectedOption" v-on:change="changeOption(event)"> <option>1</option> <option>2</option> </select> </div> 

Another approach is to pass the event to the function and use event.target.value in order to find out the value of the select element.

 var vue = new Vue({ el: '#app', methods: { changeOption: function(e){ console.log(e.target.value); } } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script> <div id="app"> <select v-on:change="changeOption(event)"> <option>1</option> <option>2</option> </select> </div> 

Answer 2

Two changes in your code :-

1. Replace <select v-on:change="changeOption()"> to <select v-on:change="changeOption">

2. changeOption:

   function(event){ console.log(event.target.value); //console.log('How can I get the value of selected option?'); }

 var vue = new Vue({ el: '#app', methods: { changeOption: function(event){ console.log(event.target.value); //console.log('How can I get the value of selected option?'); } } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script> <div id="app"> <select v-on:change="changeOption"> <option>1</option> <option>2</option> </select> </div>