时间戳

首页 > 解决方案 > 当我在 Vue 中单击路由页面 About 时，数据正在清除

javascript - 当我在 Vue 中单击路由页面 About 时，数据正在清除

问题描述

请帮帮我！我有两个页面：Home和About一个组件SecondPage。该组件有两个带有数据的表格，它应该显示在About页面上。但是当我导航到About页面时，所有数据都被清除，表格为空。我试图将About页面中的所有内容作为About组件显示在我的主页Home中，并且它有效！所以，道具是正确传递的。About为什么当我单击它时，表中的所有数据都消失在页面中？我试过.prevent了，但它没有按我的预期工作。

关于.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>

家

<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
  }
},

第二页

<template>
    <div>
        //two tables are here
   </div>
</template>


<script>
export default {
    name: "SecondPage",
    props: ["generalQuestInfo", "isActive", "getIconClass"]     

}

添加另一段代码。当点击图标时，它会打开About带有表格的页面。但是表是空的，看起来重定向是在道具传递给子组件之前发生的？？？页面未重新加载

主页

<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>

标签： javascriptvue.jsvue-componentvue-router

解决方案

Vue 文档表明Prop Cases (camelCase vs kebab-case)

HTML 属性名称不区分大小写，因此浏览器会将任何大写字符解释为小写。这意味着当您使用 in-DOM 模板时，camelCased 道具名称需要使用它们的 kebab 大小写（连字符分隔）等效项：

然后，当你在他的 HTML 模板中调用某个组件时，你应该在 kebab-case 中编写 prop：

<!-- kebab-case in HTML -->
<blog-post post-title="hello!"></blog-post>

在你的组件上，你必须在 camelCase 中调用你的道具：

Vue.component('blog-post', {
  // camelCase in JavaScript
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

推荐阅读