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]
      },
      {
        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>

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

tony19 · Accepted Answer · 2022-07-15 19:50:13Z

36

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

edited Jul 15, 2022 at 19:50

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 28, 2017 at 11:19

Vamsi Krishna

31.4k8 gold badges73 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vamsi Krishna Over a year ago

@JuveLover happy to help :)

tony19 · Accepted Answer · 2022-07-14 23:58:42Z

5

From

https://v2.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

edited Jul 14, 2022 at 23:58

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 25, 2020 at 20:45

parsecer

5,23920 gold badges86 silver badges171 bronze badges

Comments

JD-V · Accepted Answer · 2018-10-25 11:01:19Z

2

Instead of updating items inside the array, try this

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

This will update the DOM.

answered Oct 25, 2018 at 11:01

JD-V

3,7861 gold badge20 silver badges23 bronze badges

Comments

Alukret · Accepted Answer · 2024-09-21 11:00:41Z

0

You can also recreate an array/object after changing something inside

this.arr[i] = new_value
this.arr= [...this.arr]

answered Sep 21, 2024 at 11:00

Alukret

1211 silver badge8 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related