VueJSで選択したインデックスを検出する方法は？

Question

私はこのVueJSコード持っている：私は選択したモデルに私のactivedデータ値を更新したい

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

：

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コードを持っています。たとえば、ユーザーが選択フィールドで2番目のオプションを変更した場合、2番目のモデルのデータをアクティブ化された値に渡したいとします。

selecedオプションのインデックスを検出する方法はありますか？おそらくjQueryまたは他のものと組み合わせて...？

Answer 1

v-modelで実現できます。selectです。 （この値は、選択したいずれかに設定してに渡されるmodel配列自体を通じて

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>

通告我々ループとoptionのvalue属性に要素をバインドする：選択した値は、あなたのactive小道具に渡しますactiveによってv-model）。