VueのJSトグルクラスは

Question

私はこのようなテンプレート持つ

var vm = new Vue({ 
el: '#vue-instance', 
    data: { 
    inventory: [ 
     {name: 'MacBook Air', price: 1000}, 
     {name: 'MacBook Pro', price: 1800}, 
     {name: 'Lenovo W530', price: 1400}, 
     {name: 'Acer Aspire One', price: 300} 
    ], 
    isActive : false 
}, 
    methods: { 
    say: function() { 
     this.isActive = !this.isActive 
    } 
} 

を}）;

これで、リストから1つのアイテムをクリックすると、すべてのアイテムがアクティブなクラスの影響を受けます。私の質問は、どのように個々の要素を切り替えることですか？

ありがとうございます。

Answer 1

個々のアイテムを個別に追跡できるようにするには、各アイテムにアクティブなフラグが必要です。例えば

：

{name: 'MacBook Air', price: 1000, isActive: false}, 
{name: 'MacBook Pro', price: 1800, isActive: true} 

あなたは、クラスを結合して、このような何かを行うことによってitem.isActiveにイベントをクリックすることができますされます：

<li v-for="item in inventory" v-on:click="item.isActive = !item.isActive" v-bind:class="{active:item.isActive}" > {{ item.name }} - ${{ item.price }} 
</li>