Passing boolean from vue router to its component

Question

I am new to Vuejs. I try to trigger the transition, every time the Homepage router link is clicked by user. I read some of documentation of Passing Props to Route Components enter link description here, and still cannot get it work. I tested the transition is working. But it seems like the loaded boolean did not passed to my component correctly.

Router index.js

   {
      path: '/',
      name: 'Home',
      component: Homepage,
      props: { loaded: true }
  },

Homepage component:

<template>
 <transition name='fade'>
    <div  class="rgba-blue-grey-strong container" v-show="loaded">
     <p>Text with transition Every time user access Homepage component</p>
    </div>
 </transition>
</template>
<script>
export default {
     name: "Homepage",
     props:['loaded'],
     data(){
        return{
           loaded: false,
       }
     }
}

Amanze Amanze · Accepted Answer · 2018-10-11T22:01:33

You have loaded defined in both props and data object. Remove the one in your data object and it'll be fine.

<script>
export default {
  name: "Homepage",
  props:['loaded'],
  data(){
    return {
    }
  }
}
</script>

Passing boolean from vue router to its component

1 Answers