尽管看到值已更新，Vue 对象仍未返回更新值

Question

我正在为 Vue.js 编写测试，并且我正在尝试编写测试以确保当某些道具因分页而更改时，组件内的结果值会正确更新。

所以当我 console.log 组件时，我看到了正确更新的值，但是当我试图从字面上获取该属性时，它给了我旧的和过时的值。 看看下面截图中的rangeList就明白我的意思了：

这是我的代码，您可以看到是什么生成了这个输出。

pagComp.$refs.component.limit = 10;
pagComp.$refs.component.pages = 145;
console.log(pagComp.$refs.component);
console.log('RangList: ' + pagComp.$refs.component.rangeList.length);

修改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();
 },

最后，有两个地方调用了这个函数：创建组件时，以及pages属性更改时。这是观察者：

watch: {
 pages(val) {
   this.createListOfRanges();
 }

},

Answer 1

我发现您的这部分代码存在一些问题：

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

range.splice(..) returns 一个数组，它被推入 this.rangeList

暂时忘掉那个。看下面的例子：

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

如上所示，拼接returns一个数组，而不是一个元素。现在，在上面的同一示例中：

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

检查y的值。它将是 [10, 11, [1, 2] ]。它是另一个数组中的一个数组。这里看起来意义不大。您可以直接在开发者控制台中进行上述 x 和 y 实验。

在你的例子中，你的 x 恰好是 createListOfRanges 方法中的本地 range 数组，而你的 y 是属于 this.rangeList你的 Vue 组件。

你能检查一下你在那个区域附近的应用程序逻辑，看看那是否真的是你想要做的？

为了调试 Vue.js 应用程序，您还需要 Vue 开发工具：https://github.com/vuejs/vue-devtools - 它比 console.log()

好得多

Answer 2

虽然@Mani 就在给您带来问题的代码行上，但您推动了 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();
},

压入拼接的结果只是使单个元素包含范围内的所有元素。

尝试将其更改为

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

尽管可以通过将 for(let i = 0; i < this.pages; i++) { i 值直接推入 rangeList 来简化您的函数，除非这是一种简化。

这 JSFiddle 说明了我在说什么。

Answer 3

我很欣赏上面的答案，但它们不是问题所在。

问题出在 Vue 的生命周期上。我不是 100% 确定为什么，但是当 page 和 limit 变量发生变化时，page watcher（如上所示）需要另一个时间来执行和更新组件。因此它不会出现在我的测试中。所以我所做的就是像这样使用 nextTick ，这解决了问题。

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

尽管看到值已更新，Vue 对象仍未返回更新值

Vue Object isn't returning updated value despite seeing the value updated

vue.js

vue-component