Data is clearing when I click route page About in Vue

问题

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>

回答1:

Vue documentation indicates Prop Casing (camelCase vs kebab-case)

HTML attribute names are case-insensitive, so browsers will interpret any uppercase characters as lowercase. That means when you’re using in-DOM templates, camelCased prop names need to use their kebab-cased (hyphen-delimited) equivalents:

Then when u call some component in his HTML template you should write the prop in kebab-case:

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

And on your component u must to call your props in camelCase:

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

回答2:

I added store with Vuex, and this problem was solved!

来源：https://stackoverflow.com/questions/57239102/data-is-clearing-when-i-click-route-page-about-in-vue

标签

javascript

Vue.js

vue-component

vue-router