继续在历史记录中前后添加行 [英] Resume adding rows on history back and forward
问题描述
有两个页面:Home.vue 和 Statistics.vue.在主页上，在页面加载时有计算一些数字的间隔.当您切换到/statistic"页面时，间隔停止，当您返回/"页面时，间隔和计数从停止时开始.问题是，当您从/statistics"切换到/"并再次返回到/statistics"时，我需要恢复向/statistic"页面添加行一次.现在/statistics"总是将值重置为默认值并从头开始添加行.检查解决方案的工作代码示例:https://codesandbox.io/s/black-sound-rseqb
"/statistics" 页面:
<div class="统计信息"><table v-for="(field, index) in fields" :key="index"><tr><th>场</th><th>值</th><th>时间</th></tr><tr v-for="(change, index) in changesArray[index]" :key="index"><td>{{change.field }}</td><td>{{change.value }}</td><td>{{change.time }}</td></tr></模板><脚本>导出默认{name: '统计',道具: {变化A:{类型:数组，要求:真实},变化B:{类型:数组，要求:真实}},数据 () {返回 {字段:['A'，'B']，changesArray: [this.changesA, this.changesB]}}}<style lang="scss" 作用域>.统计数据 {显示:弹性；}表:第一个类型{右边距:20px；}</风格>
App.vue"
<div id="应用程序"><div id="导航"><router-link to="/">首页</router-link>|<router-link to="/statistics">统计</router-link><router-view :changesA.sync="changesA" :changesB.sync="changesB"/>
</模板><脚本>导出默认{name: '应用程序',数据 () {返回 {变化A:[]，变化B:[]}}}<style lang="scss">#应用程序 {字体系列:Avenir、Helvetica、Arial、sans-serif；-webkit-font-smoothing:抗锯齿；-moz-osx-font-smoothing:灰度；颜色:#2c3e50；}#导航{填充:30px 0;一种 {字体粗细:粗体；颜色:#2c3e50；&.router-link-exact-active {颜色:#42b983；}}}</风格>
我进行了一些更改以修复您的代码
首先，您试图将 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] });//见我哪里不对
另外，我认为您只想在数组为空时调用 firstObjects()，这可以通过简单地放置一个封闭条件来完成.
固定沙箱:https://codesandbox.io/s/live-stats-with-pause-on-route-change-lqmqo
There is two pages: Home.vue and Statistics.vue. At home page, there is the interval that counts some numbers at page load. When you switch to "/statistic" page interval is stopped and when you get back to "/" page, interval and counting are start from when they stopped. Problem is, that I need to resume adding rows to "/statistic" page once when you switch from "/statistics" to "/" and back again to "/statistics". Now "/statistics" always reset values to default and start adding rows from beginning. Working code example to check solution: https://codesandbox.io/s/black-sound-rseqb
"/statistics" page:
<template>
<div class="statistics">
<table v-for="(field, index) in fields" :key="index">
<tr>
<th>Field</th>
<th>Value</th>
<th>Time</th>
</tr>
<tr v-for="(change, index) in changesArray[index]" :key="index">
<td>{{ change.field }}</td>
<td>{{ change.value }}</td>
<td>{{ change.time }}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: 'Statistics',
props: {
changesA: {
type: Array,
required: true
},
changesB: {
type: Array,
required: true
}
},
data () {
return {
fields: ['A', 'B'],
changesArray: [this.changesA, this.changesB]
}
}
}
</script>
<style lang="scss" scoped>
.statistics {
display: flex;
}
table:first-of-type {
margin-right: 20px;
}
</style>
"App.vue"
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/statistics">Statistics</router-link>
</div>
<router-view :changesA.sync="changesA" :changesB.sync="changesB" />
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
changesA: [],
changesB: []
}
}
}
</script>
<style lang="scss">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
}
#nav {
padding: 30px 0;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
There were a couple of changes done by me to fix your code
Firstly, you were trying to pass localChanges to parent which is getting initialized on each component load which is resetting your array. It is fixed by using
this.changesA.push({ ...obj });
this.changesB.push({ ...obj });
this.$emit("update:changesA", [...this.changesA]);
this.$emit("update:changesB", [...this.changesB]);
Secondly, in your firstObjects() method, you were pushing an item at index on obj as
this.changesB.push({ ...obj[i] }); //see i
which is wrong
Also, I think you want to call firstObjects() only if the array is empty which can be done by simply putting an enclosing condition.
Fixed sandbox: https://codesandbox.io/s/live-stats-with-pause-on-route-change-lqmqo
这篇关于继续在历史记录中前后添加行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
