[Vuejs]-Vue Object isn't returning updated value despite seeing the value updated

by

0👍

✅

I appreciate the answers above, however they aren’t what the issue was.

The problem was with Vue’s lifecycle. I’m not 100% sure why, but when the page and limit variables are changed it takes another moment for the page watcher (shown above) to get executed and update the component. So thus it wouldn’t show up in my tests. So what I did was use nextTick like so, which fixed the problem. 

pagVue.limit = 10;  // limit and pages change together every time automatically
pagVue.pages = 145;
Vue.nextTick(() => {
  expect(pagination.rangeList.length).toBe(25);
})
👤Nick Res

1👍

I see some issues with this part of your code:

while(range.length > 0) {
    this.rangeList.push(range.splice(0, this.rangeLength));
}

range.splice(..) returns an array, which is getting pushed into this.rangeList

Forget about that for a minute. Look at the following example:

x = [1, 2, 3, 4]
x.splice(0, 2)  // result: [1, 2]

As you can see above, splice returns an array, not an element. Now, in the same example above:

x = [1, 2, 3, 4]
y = [10, 11]
y.push(x.splice(0, 2))

Check the value of y. It will be [10, 11, [1, 2] ]. It is an array within another array. It does not look very meaningful here. You can do the above x and y experiments directly in your developer console.

In your case, your x happens to be the local range array within createListOfRanges method, and your y is this.rangeList that belongs to your Vue component.

Can you check your app logic at around that area, and see if that is really what you want to do?

For debugging Vue.js apps, you also need Vue devtools: https://github.com/vuejs/vue-devtools – it is much better than console.log()

👤Mani

1👍

While @Mani is right on the line of code giving you issues is your push to rangeList.

createListOfRanges() {
  let range = [];
  for(let i = 0; i < this.pages; i++) {
    range.push(i);
  }

  this.rangeList = [];
  while(range.length > 0) {
    this.rangeList.push(range.splice(0, this.rangeLength));
  }
  this.correctLastRange();
},

pushing the result of the splice just makes a single element with all the elements of range in it.

try changing it to

this.rangeList.push(range.shift());

Though your function could be simplified by pushing the for(let i = 0; i < this.pages; i++) { i value directly to rangeList unless that’s a simplification.

This JSFiddle shows what I’m talking about.

👤Justin MacArthur

Leave a comment