vue.js条件付きCSSクラス内の配列要素へのアクセス方法

Question

Vue.jsから始めて、条件付きCSSを試してみるための簡単なページを用意しました。

<div id="app"> 
    <div class="demo" @click="handleClick(0)" :class="{ 'red': attachRed[0] }"> 
    </div> 
    <div class="demo" @click="handleClick(1)" :class="{ 'red': attachRed[1] }"> 
    </div> 
    <div class="demo" @click="handleClick(2)" :class="{ 'red': attachRed[2] }"> 
    </div> 
</div> 

、その後、私のjs

new Vue({ 
    el: "#app", 
    data: { 
    attachRed: [false, false, false] 
    }, 
    methods: { 
    handleClick: function(index) { 
     this.attachRed[index] = !this.attachRed[index]; 
     console.log(this.attachRed) 
    } 
    } 
}); 

を各divが灰色のブロックです。 「赤」クラスをつけると、ブロックが赤く変わります。デモdivをクリックするたびにattachRed配列が更新されます。しかし、クラスは決して追加されません。私がattachRedプロパティをtrueにしてから始めると、最初は赤色のクラスがアタッチされますが、クリックされてもこれは切り替わりません。これらの値が配列に格納されていない場合、これは機能します。

これらの変更に対してビューバインドを監視することはできますか、手動でトリガーすることはできますか？それとも配列のプロパティについては何らかの問題がありますか？

Answer 1

だからです。このページには、それに少し行く：https://vuejs.org/2016/02/06/common-gotchas/要するに

、あなたが

var val = this.attachedRed[index] 
this.attachedRed.$set(index, !val);