In the application, we have two main pages - Home.vue and Statistics.vue. The Home.vue page renders the TableFields.vue component. On the Home page, there are fields with numbers that have an initial value of "3" set upon page load. An interval running a calculate function adds numbers every two seconds. How can we ensure that when transitioning from '/' to '/statistics', all ongoing calculations are paused, and then resumed when returning back? Below each field on the home page, there are buttons that toggle the setInterval() function to stop or resume the calculations. Essentially, when moving from "/" to "/statistics", we need to trigger clearInterval() to stop the calculations on the "/" page. @Saksham TableFields.vue:
<template>
<div>
<table class="table-a">
<tr>
<th>A</th>
<td class="sign">{{ this.randomSign.A }}</td>
<td>{{ initialValue.A }}</td>
<td v-show="this.randomSign.A == '+'">⬆</td>
<td v-show="this.randomSign.A == '-'">⬇</td>
</tr>
</table>
<button @click="toggleIntervalA()">
<span v-show="this.startStop.A">Stop</span>
<span v-show="!this.startStop.A">Start</span>
</button>
<table class="table-b">
<tr>
<th>B</th>
<td class="sign">{{ this.randomSign.B }}</td>
<td>{{ initialValue.B }}</td>
<td v-show="this.randomSign.B == '+'">⬆</td>
<td v-show="this.randomSign.B == '-'">⬇</td>
</tr>
</table>
<button @click="toggleIntervalB()">
<span v-show="this.startStop.B">Stop</span>
<span v-show="!this.startStop.B">Start</span>
</button>
</div>
</template>
<script>
export default {
name: 'TableFields',
props: {
changesA: {
type: Array,
required: false
},
changesB: {
type: Array,
required: false
}
},
data () {
return {
// Data properties removed for brevity
}
},
methods: {
// Methods logic removed for brevity
},
mounted () {
// Mounted logic removed for brevity
},
beforeDestroy () {
// Before destroy logic removed for brevity
}
}
</script>
<style lang="scss" scoped>
// Styling rules removed for brevity
</style>
Project repository: link