Dfyjkt

I am doing single page application writing style to build my app with vue.
However the prop data passed to a child component is not being loaded any scope(created(), mounted() etc).

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Ques from '@/components/timeline/Ques'
import Timeline from '@/components/Timeline'

Vue.use(Router);


export default new Router(
 mode: 'history',
 routes: [
 
 path: '/feeds',
 name: 'Timeline',
 component: Timeline
 ,
 
 path: '/ques',
 name: 'Ques',
 component: Ques
 
 ]
 )

timeline.vue

 <template>
 <main class="timeline_wrapper">
 <Ques :timelinePosts="posts"></Ques>
 </main>

 </template>

 <script>
 import Ques from './timeline/Ques.vue'
 export default 
 name: "timeline",
 data() 
 return 
 posts: [
 
 id: 0,
 name: 'hi'
 ,
 ]
 
 ,
 components: Ques 
 
</script>

Ques.vue

<template>
</template>

<script>
 export default 
 name: "Ques",
 props: [
 'timelinePosts'
 ],
 created () 
 console.log(this.timelinePosts);
 
 
</script>

what's following the console.log is an error saying the timelinePosts is 'undefined'.
How can the prop value be properly loaded in the child component?

I think is because you have defined Ques in your Router and it doesn't has props: true. And i also think that if you are not going to use it from a <router-link> you should remove it

I think the name of your property is wrong. Just change in timeline.vue :timelinePosts="posts" to :timeline-posts="posts"

HTML attribute names are case-insensitive. Any uppercase character will be interpreted as lowercase. So camelCased prop names need to use their kebab-cased equivalents.