当我在 Vue 中单击路由页面 About 时数据正在清除
[英] Data is clearing when I click route page About in Vue
本文介绍了当我在 Vue 中单击路由页面 About 时数据正在清除的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
请帮帮我！我有两个页面:Home、About 和一个组件 SecondPage.这个组件有两个数据表，应该显示在About页面上.但是当我导航到 About 页面时，所有数据都被清除，表格是空的.我试图在我的主页 Home 中将 About 页面中的所有内容显示为 About 组件，并且它有效！所以，props 被正确传递.为什么当我点击 About 页面时，表格中的所有数据都消失了?我尝试了 .prevent，但它并没有像我预期的那样工作.
关于.vue
<div class="关于"><h1>这是一个关于页面</h1><SecondPage v-bind:generalQuestInfo="generalQuestInfo" :isActive="isActive" :getIconClass="getIconClass"/>
</模板><脚本>从'../components/SecondPage' 导入 SecondPage导出默认{name: '关于',成分: {第二页},道具:[generalQuestInfo"，isActive"，getIconClass"]}
首页
<div id="应用程序"><h1>任务统计</h1><MainPage v-bind:mainPageInfo="mainPageInfo" v-on:main-handle="handler(loadGeneralQuestInfo, loadFinishedQuestleafs, $event)"/><SecondPage v-bind:generalQuestInfo="generalQuestInfo" :isActive="isActive" :getIconClass="getIconClass"/><关于 v-bind:generalQuestInfo="generalQuestInfo" :isActive="isActive" :getIconClass="getIconClass"/>
</模板><脚本>从'../components/MainPage' 导入 MainPage从'../components/SecondPage' 导入 SecondPage从'./About'导入关于从 'axios' 导入 axios导出默认{name: '家',成分: {主页，第二页，关于},数据(){返回 {mainPageInfo: [],一般任务信息:[]，已完成的Questleafs: [],isActive: 0//这个值会根据在 MainTable.vue 的表格中点击的图标而变化}},
第二页
<div>//这里有两张表
</模板><脚本>导出默认{name: "第二页",道具:[generalQuestInfo"，isActive"，getIconClass"]}
添加另一段代码.当点击图标时，它假设打开带有表格的About页面.但是表是空的，看起来重定向发生在道具传递给子组件之前???页面未重新加载
主页
<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="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 == '崩溃' ?'fas fa-times' :'fas fa-minus'"></i></router-link></td></tr>
</模板>
解决方案
我在Vuex中添加了store，这个问题解决了！
Help me please! I have two pages: Home, About and a component SecondPage. This component has two tables with data, and it should be displayed on About page. But when I navigate to About page, all data is cleared, and tables are empty.
I tried to display all from About page as About component in my main page Home, and it works! So, props are passed correctly.
Why all data from tables disappearing in About page when I click it?
I tried .prevent, but it doesn't work as I expect.
About.vue
<template>
<div class="about">
<h1>This is an 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"]
}
Adding another piece of code. When click on icon, it suppose to open About page with tables. But tables are empty, it looks like redirecting happens before props are passed to child component??? Page is not reloading
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>
解决方案
I added store with Vuex, and this problem was solved!
这篇关于当我在 Vue 中单击路由页面 About 时数据正在清除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
