css - 如何访问 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 都是一个灰色 block 。附加“红色”类时， block 变为红色。每次单击演示 div 时，attachRed 数组都会更新。但是从未添加该类。如果我将 attachRed 属性设置为 true，则最初会附加红色类，但单击时不会切换。如果这些值未存储在数组中，则此方法有效。

是否可以让 View 绑定(bind)监视这些更改或手动触发一个？或者在涉及数组属性时是否存在某种问题？

Answer 1

这是一个陷阱。此页面稍微介绍一下:https://vuejs.org/2016/02/06/common-gotchas/

简而言之，你想做

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