如何检测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> 

我想我actived数据值更新为所选择的模型。例如，用户在选择字段中更改第二个opcion，我想将第二个模型的数据传递给actived的值。

有没有办法检测选择的索引？也许结合jQuery或其他...？

Answer 1

你可以用v-modelselect来实现。所选择的值将传递到您的active道具：

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阵列本身和结合元件的optionvalue属性（该值被设置为选择的一个，并传递到active，v-model）。