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);

如何访问vue.js条件css类中的数组元素

1 个答案: