如何访问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);