Question

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

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>

首页

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

Answer 1

Vue文档指出Prop Casing (camelCase vs kebab-case)

HTML属性名称不区分大小写，因此浏览器将解释任何大写字符作为小写。这意味着当您使用在DOM模板中，骆驼的道具名称需要使用kebab大小写（以连字号分隔）的等效项：

然后，当您在其HTML模板中调用某个组件时，您应该在kebab-case中编写道具：

<!-- 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>'
})

Answer 2

我在store中添加了Vuex，此问题已解决！

单击Vue中的“关于”路线页面时，数据正在清除

2 个答案: