vue.js data not updating when incremented

Question

I have an object containing an array, which gets incremented after some amount of logic has completed.

Vue.js doesn't seem to be capturing this increment and displaying it to the view.

HTML:

<div id="demo">
  <p>{{points}}</p>
</div>

JS:

function Board()
{ 
  this.team1 = {pointsMade:[0]};
}

var newBoard = new Board();

newBoard.team1.pointsMade[0]++


new Vue({
  el: '#demo',
  data: {
    points: newBoard.team1.pointsMade
  }
})

setTimeout(newBoard.team1.pointsMade[0]++,1000)

I have a JSFiddle that outlines the problem.

You can see that after setTimeout(newBoard.team1.pointsMade[0]++,1000) runs, the value should be '2', but is only displayed at '1'. What am I missing here?

This is directly explained in the documentation vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats — Andy Ray
– Andy Ray, Commented Jan 2, 2017 at 3:38
@AndyRay Great, I"m quite new to Vue.js however and am confused by the documentation, how would you go about implementing a solution to my described issue? — Gerard Simpson
– Gerard Simpson, Commented Jan 2, 2017 at 3:41

tony19 · Accepted Answer · 2022-07-15 21:41:10Z

3

When you define

  data: {
    points: newBoard.team1.pointsMade[0]
  }

the points variable is just assigned current value of newBoard.team1.pointsMade[0], which is 1 at this moment. There is no magic here. JS primitives works by value, not by references.

So, after updating the newBoard.team1.pointsMade[0] variable, the point variable is not updating of course.

To make this work, use object instead of primitive value. Objects work by reference in JS.

From Properties and Methods example:

var data = { a: 1 }
var vm = new Vue({
  data: data
})
vm.a === data.a // -> true
// setting the property also affects original data
vm.a = 2
data.a // -> 2
// ... and vice-versa
data.a = 3
vm.a // -> 3

edit

There is another caveat here:

Due to limitations in JavaScript, Vue cannot detect when you directly set an item with the index, e.g. vm.items[indexOfItem] = newValue. So, use Vue.set(newBoard.team1.pointsMade, 0, newBoard.team1.pointsMade[0] + 1);.

I updated your fiddle.

edited Jul 15, 2022 at 21:41

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 2, 2017 at 4:17

Ruslan Stelmachenko

5,4982 gold badges42 silver badges54 bronze badges

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

2 Comments

Gerard Simpson Over a year ago

What if I were to set the view data to newBoard.team1.pointsMade instead of newBoard.team1.pointsMade[0]. Doesn't that set it to a reference type? I will edit my question to reflect this

Ruslan Stelmachenko Over a year ago

Yes, sorry, there is another caveat here: Due to limitations in JavaScript, Vue cannot detect when you directly set an item with the index, e.g. vm.items[indexOfItem] = newValue. So, use Vue.set(newBoard.team1.pointsMade, 0, newBoard.team1.pointsMade[0] + 1);.

Collectives™ on Stack Overflow

vue.js data not updating when incremented

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related