jquery - 如何检测 VueJS 中的选定索引？

Question

我有这个 VueJS 代码:

new Vue({
    el: '#app',
    data: {
        model: [
            { name: 'a', price: 1.00 },
            { name: 'b', price: 2.00 },
            { name: 'c', price: 3.00 },
        ],
        actived: {}
    },
    methods: {
       setActive: function(model) {
           this.actived = model;
       }
    }
});

并有这个 HTML 代码:

<select v-on:change="setActive(models[n])">
    <option v-for="n in 3">{{ n }}</option>
</select>

我想将我的事件数据值更新为所选模型。例如，用户在选择字段上更改第二个选项，我想将第二个模型的数据传递到激活值中。

有没有办法检测所选选项的索引？可能与 jQuery 或其他...结合使用？

Answer 1

您可以使用 v-model 来实现它在 select .所选值将传递给您的 active Prop :

new Vue({
  el: '#app',
  data: {
    model: [
        { name: 'a', price: 1.00 },
        { name: 'b', price: 2.00 },
        { name: 'c', price: 3.00 },
    ],
    active: {}
  }
});

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <select v-model="active"> // v-model
    <option :value="n" v-for="n in model">{{ n.name }}</option> // bind value
  </select>
  <p>{{ active }}</p>
</div>

注意我们遍历了 model数组本身并将元素绑定(bind)到 value option 的属性(此值设置为选定的一个并通过 active 传递给 v-model)。