Vue.js - 更新的数组项值不会在页面中更新答案

【问题标题】：Vue.js - updated array item value doesn't update in pageVue.js - 更新的数组项值不会在页面中更新
【发布时间】：2017-12-01 16:46:45
【问题描述】：

“test”是我的 vue 数据中的一个对象数组

var vue = new Vue({
  el: '#content',

  data: {
    test: [
      {
        array: [0, 0, 0, 0]
      },
      {
        array: [0, 0, 0, 0]
      }
    ],
    number: 0
  },

  methods: {   
    setNumber: function(){
      this.number = 5;
    },

    setArray: function(){
      this.test[0].array[0] = 9;
    }
  }
})

问题是如果我更改“数组”中元素的值，而日志显示该值已更改，它不会在页面上更新。另一方面，如果我更改“数字”的值，则页面上的“数字”和“数组”值都会更新。

<section id="content">
  <div>Value in array: {{ test[0].array[0] }}</div>
  <div>Value in number: {{ number }}</div>
  <!-- {{ setNumber() }} -->
  {{ setArray() }}
</section>

<!-- Loading Vue.js -->
<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.jsdelivr.net/vue.resource/1.3.1/vue-resource.min.js"></script>

如何让我的页面响应“数组”更新？
这是 JsFiddle：https://jsfiddle.net/zcbh4esr/

【问题讨论】：

标签： javascript arrays data-binding vue.js virtual-dom

【解决方案1】：

这是由于array change caveats。

改为这样做

var vue = new Vue({
  el: '#content',

  data: {
    test: [{
      array: [0, 0, 0, 0]
    }, {
      array: [0, 0, 0, 0]
    }],
    number: 0
  },

  methods: {
    setNumber: function() {
      this.number = 5;
      console.log(this.number);
    },
    setArray: function() {
      //this.test[0].array[0] = 9;
      this.$set(this.test[0].array, 0, 9);
      console.log(this.test[0].array[0]);
    }
  }
});

这里是fiddle

【讨论】：

@JuveLover 乐于助人:)

【解决方案2】：

来自

https://vuejs.org/v2/guide/reactivity.html

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})

//vm.items[1] = 'x' // is NOT reactive
Vue.set(vm.items, indexOfItem, newValue)  //works fine

为我工作

【讨论】：

【解决方案3】：

不要更新数组中的项目，试试这个

 this.users = Object.assign({},newList);

这将更新 DOM。

【讨论】：