尽管看到值已更新，但Vue对象不会返回更新的值

Question

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

所以当我调试组件时，我会看到正确更新的值，但是当我尝试逐字地获取该属性时，它会给我一个旧的和过时的值。 在下面的屏幕截图中查看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(..)返回一个数组，该数组将被推送到this.rangeList

暂时忘记这一点。请看以下示例：

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

如上所示，splice返回一个数组，而不是一个元素。现在，在上面的例子中：

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

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

在您的情况下，您的x恰好是range方法中的本地createListOfRanges数组，而您的y是属于您的Vue的this.rangeList成分

您可以查看该区域周围的应用程序逻辑，看看这是否真的是您想要做的？

对于调试Vue.js应用程序，您还需要Vue devtools：https://github.com/vuejs/vue-devtools - 它比console.log()

好得多

Answer 2

虽然@Mani在代码行上是正确的，但是你可以向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(); }, 推送。{/ p>

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

推送拼接的结果只会生成一个包含范围内所有元素的单个元素。

尝试将其更改为

for(let i = 0; i < this.pages; i++) {

虽然可以通过将i rangeList值直接推送到{{1}}来简化您的功能，除非这是简化。

这JSFiddle显示了我在说什么。

Answer 3

我很欣赏上面的答案，但问题不在于此。

问题在于Vue的生命周期。我不是百分之百确定原因，但是当页面和限制变量发生变化时，页面观察者（如上所示）需要另一个时刻才能执行并更新组件。因此它不会出现在我的测试中。所以我所做的就像使用nextTick一样，这解决了问题。

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