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-model上使用select来实现此目标。所选值将传递到active道具：

＆＃13;

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

＆＃13;

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

＆＃13;

请注意，我们遍历model数组本身并将元素绑定到value的{{1}}属性（此值设置为选定的一个，并通过{{传递给option 1}}）。

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

1 个答案: