如何使用vue.js获取所选选项的索引

Question

对不起新手问题.但是如何从selectbox中获取所选元素的索引并运行一个函数.我下面的代码不会触发switchView()函数.

<select id="selectbox" @change="switchView(index)">
  <option [v-for="(item, index) in items" v-bind:value="item.title"]>
    {{ item.title }}
  </option>
</select>

任何帮助将不胜感激.

编辑: 移动@change="switchView(index)"从<option>到<select>,由于@Phil

我需要索引,因为我有几个计算项目.我需要根据用户对项目的选择来更改视图.

Answer 1

传递$event.target.selectedIndex给你的函数

使用@change指令来监听更改事件。调用您的功能和通过所述$event事件目标的或所选择的索引$event.target.selectedIndex作为参数传递给你的函数。

<select @change="switchView($event, $event.target.selectedIndex)">

您的方法接收传递的参数。

methods: {
    switchView: function(event, selectedIndex) {
      console.log(event, selectedIndex);
    }
  }

完整示例https://jsfiddle.net/3p7rhjyw/

<div id="app">
  <select @change="switchView($event, $event.target.selectedIndex)">
  <option v-for="(item, index) in items" v-bind:value="item.title">
    {{ item.title }}
  </option>
</select> 
<p>
{{ selectedIndex }} {{ items[selectedIndex].id }}
</p>
</div>

<script>
new Vue({
  el: "#app",
  data: {
    items: [
      { title: "Learn JavaScript", id: 'A' },
      { title: "Learn Vue", id: 'B' },      
      { title: "Play around in JSFiddle", id: 'C' },
      { title: "Build something awesome", id: 'D' }
    ],
    selectedIndex: 0
  },
  methods: {
    switchView: function(event, selectedIndex) {
      console.log(event, selectedIndex);      
      this.selectedIndex = selectedIndex;
    }
  }
});
</script>

关于HTMLSelectElement.selectedIndex 的Mozilla 文档。

Answer 2

您可以使用@changeon select元素并在indexOf函数的帮助下获取索引.这是工作演示.

看代码:

var demo = new Vue({
    el: '#demo',
    data: function(){
        return {
        age: '',
        selectedIndex: '',
        options: [1,2,3,44,55]
      };
    },
    methods: {
      selected: function () {
         this.selectedIndex = this.options.indexOf(this.age)
         alert('this is selected Index ' + this.selectedIndex)
       }
    }   
})