Vue.js - 更新的数组项值不会在页面中更新 [英] Vue.js - updated array item value doesn't update in page

问题描述

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

"test" is an array of object in my vue data

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

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

Problem is that if i change the value of an element in "array", while log shows that the value has changed, it doesn't update on the page. On the other hand, if i change value of "number", both "number" and "array" value on the page are updated.

<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/

How can i make my page responsive to "array" update?
Here's the JsFiddle: https://jsfiddle.net/zcbh4esr/

推荐答案

这是由于阵列更改警告。

请这样做

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

这是小提琴

这篇关于Vue.js - 更新的数组项值不会在页面中更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！