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

Question

对不起新手问题。但是我如何从选择框中获取所选元素的索引并运行函数。我下面的代码不会触发 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

我需要索引，因为我有几个计算项目。我需要根据用户从项目中的选择更改视图。

原文由 tagaism 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以在 select 元素上使用 @change 并借助 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)
       }
    }
})

原文由 Saurabh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

将 $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 文档。

原文由 Tobi Obeck 发布，翻译遵循 CC BY-SA 4.0 许可协议