Javascript 继续前后添加历史记录行

有两个页面：

Home.vue

和

Statistics.vue

。在主页上，有一个间隔，用于计算页面加载时的一些数字。当您切换到“/统计”页面时，间隔停止，当您返回“/”页面时，间隔和计数从停止时开始。问题是，当您从“/statistics”切换到“/”并再次切换到“/statistics”时，我需要再次向“/statistics”页面添加行。现在“/statistics”总是将值重置为默认值，并从头开始添加行。检查解决方案的工作代码示例：

“/统计”页：

领域
价值
时间
{{change.field}
{{change.value}}
{{change.time}
导出默认值{
名称：'统计'，
道具：{
变化a：{
类型：数组，
必填项：true
},
改变b：{
类型：数组，
必填项：true
}
},
数据（）{
返回{
字段：['A'，'B']，
changesArray:[this.changesA，this.changesB]
}
}
}
.统计数字{
显示器：flex；
}
表：第一类{
右边距：20px；
}

“App.vue”

家|
统计
导出默认值{
名称：“应用程序”，
数据（）{
返回{
变更a:[]，
changesB:[]
}
}
}
#应用程序{
字体系列：Avenir、Helvetica、Arial、无衬线字体；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
颜色：#2c3e50；
}
#导航{
填充：30px0；
a{
字体大小：粗体；
颜色：#2c3e50；
&.路由器链路完全激活{
颜色：#42b983；
}
}
}

有一个保持活力的方法；如Vue文档所示

<keep-alive>
  <component v-bind:is="statistics"></component>
</keep-alive>

Vue文档：

---

我做了一些更改来修复您的代码

首先，您试图将

localChanges

传递给父级，该父级在重置数组的每个组件加载时都会初始化。它是通过使用

this.changesA.push({ ...obj });
this.changesB.push({ ...obj });
this.$emit("update:changesA", [...this.changesA]);
this.$emit("update:changesB", [...this.changesB]);

其次，在您的

firstObjects（）

方法中，您在

obj

上的索引处按

this.changesB.push({ ...obj[i] }); //see i

哪个是错的

另外，我认为只有当数组为空时才需要调用

firstObjects（）

，这可以通过简单地放置一个封闭条件来完成

---

修复了沙盒：

请您在“代码沙盒”中测试该代码。林克在问题的末尾。如果它能工作，请准确地写下如何实现它，就像我尝试过的那样，但没有成功。这种方法无法工作，因为在这种情况下，

change

for循环中的变量总是期望来自“/”页面的值。当您单击back to“/”时，出现一个错误

change is undefined

，该错误会阻止页面。我在

上尝试了

。在您的沙盒示例中，统计日志有点凌乱，尽管您的修复是正确的。我不确定你所说的关于

firstObjects（）

的建议到底是什么意思，但这启发了我在挂载的钩子块上写：

if（this.changesA&&this.changesB====[]）{this.firstObjects（）}

，瞧！！！一切都很顺利。现在：）老兄，我对你无私的帮助感激不尽。向你问好。

this.changesA.push({ ...obj });
this.changesB.push({ ...obj });
this.$emit("update:changesA", [...this.changesA]);
this.$emit("update:changesB", [...this.changesB]);

this.changesB.push({ ...obj[i] }); //see i