Question

我正在学习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>

Answer 1

您可以使用v-model指令。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

代码中有两处更改： -

替换<select v-on:change="changeOption()"> 到<select v-on:change="changeOption">
changeOption：

功能（事件）{ 的console.log（event.target.value）; //console.log('我如何获得所选选项的值？＆＃39;）; }

＆＃13;

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?');
    }
  }
});

＆＃13;

<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>

＆＃13;

如何在Vue JS

2 个答案: