Vue.js - updated array item value doesn't update in page

Question

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

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

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


        

Answer 1

From

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

worked for me

Answer 2

This is due to the array change caveats.

Do it like this instead

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

Here is thefiddle

Answer 3

Instead of updating items inside the array, try this

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

This will update the DOM.