vue 改变数组里的布尔值页面上没有改变

Question

demo在这里http://jsfiddle.net/mtcv824d/

<div id="app">
  <div @click="change(0)">
  {{arr[0]}}
  </div>
</div>
new Vue({
  el: "#app",
  data: {
    arr: [true, false, false]
  },
  methods: {
      change: function(index){
      alert(this.arr[index])
        this.arr[index] = !this.arr[index]
      alert(this.arr[index])
    }
  }
})

方法中输出发现值改变了，但页面上却没有变化，是什么原因呢？

Answer 1

文档有写：
由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength

https://cn.vuejs.org/v2/guide...

Answer 2

你需要深拷贝一下

// 类似于
this.arr[index] = JSON.parse(JSON.stringify(this.arr[index]))

Answer 3

Vue.$set

Answer 4

函数关键代码可以采用下面两种中的一种，数组下标直接赋值的话vue监听不到数据更新。

      this.arr.splice(index, 1, !this.arr[index])
      this.$set(this.arr, index, !this.arr[index])

Answer 5

this.$set(this.arr,index,ture/false)