Assist me, please! I am encountering an issue with my website. I have two main pages: Home and About, as well as a component called SecondPage. The SecondPage component contains two tables filled with data that should be displayed on the About page. However, every time I navigate to the About page, all the data in the tables disappears and they are empty.
I attempted to display everything from the About page as the About component on my Home page, and surprisingly it worked perfectly fine as expected. This indicates that the props are being passed correctly between components. So why is all the table data disappearing when I click on the About link?
I also tried using .prevent to prevent this issue but unfortunately, it did not work as I had hoped.
About.vue
<template>
<div class="about">
<h1>This is the About page</h1>
<SecondPage v-bind:generalQuestInfo="generalQuestInfo" :isActive="isActive" :getIconClass="getIconClass" />
</div>
</template>
<script>
import SecondPage from '../components/SecondPage'
export default {
name: 'About',
components: {
SecondPage
},
props: ["generalQuestInfo", "isActive", "getIconClass"]
}
</script>
Home
<template>
<div id="app">
<h1>Quest Statistics</h1>
<MainPage v-bind:mainPageInfo="mainPageInfo" v-on:main-handle="handler(loadGeneralQuestInfo, loadFinishedQuestleafs, $event)" />
<SecondPage v-bind:generalQuestInfo="generalQuestInfo" :isActive="isActive" :getIconClass="getIconClass"/>
<About v-bind:generalQuestInfo="generalQuestInfo" :isActive="isActive" :getIconClass="getIconClass"/>
</div>
</template>
<script>
import MainPage from '../components/MainPage'
import SecondPage from '../components/SecondPage'
import About from './About'
import axios from 'axios'
export default {
name: 'Home',
components: {
MainPage,
SecondPage,
About
},
data(){
return {
mainPageInfo: [],
generalQuestInfo: [],
finishedQuestleafs: [],
isActive: 0 //this value is changing according to icon that was clicked in table from MainTable.vue
}
},
SecondPage
<template>
<div>
//two tables are here
</div>
</template>
<script>
export default {
name: "SecondPage",
props: ["generalQuestInfo", "isActive", "getIconClass"]
}
Here's another code snippet related to navigating to the About page:
MainPage
<template>
<div>
<table align="center">
<tr>
<th v-bind:key="data.id" v-for="data in mainPageInfo">{{ data.alias }}</th>
</tr>
<tr>
<td v-bind:key="data.id" v-for="data in mainPageInfo">
<router-link :to="data.status == 'SUCCESS' || data.status == 'CRASH' ? '/about' : '/no-info'"><i v-on:click="$emit('main-handle', data.status)" v-bind:class="data.status == 'SUCCESS' ? 'fas fa-check':
data.status == 'CRASH' ? 'fas fa-times' :
'fas fa-minus'"></i></router-link>
</td>
</tr>
</table>
</div>
</template>