如何在 Vue JS 中获取 select 标签的值答案

【问题标题】：How can I get the value of select tag in Vue JS如何在 Vue JS 中获取 select 标签的值
【发布时间】：2018-01-03 07:14:18
【问题描述】：

我正在学习 Vue JS，但遇到了问题。

我想获取所选选项的值。

但我做不到。

我尝试在 Google 上搜索，但找不到。

这是我的示例代码。

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>

【问题讨论】：

标签： javascript html vue.js vuejs2

【解决方案1】：

您可以使用v-model 指令。

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>

另一种方法是将事件传递给function 并使用event.target.value 以找出select 元素的值。

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>

【讨论】：

【解决方案2】：

你的代码有两个变化：-

替换<select v-on:change="changeOption()"> 给<select v-on:change="changeOption">
更改选项：

函数（事件）{ console.log(event.target.value); //console.log('我怎样才能得到所选选项的值？'); }

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>

【讨论】：