Send data to components in VueJS + Vue Router - laravel

Question

I can't pass data from app to compenent. After render it shows only clear html, without data from vue. All works, but without data((
My code from app.js:
var Series = Vue.component('Series', require('./components/Series.vue'),{
props: {
series: {
type: Array,
default: []
},
images: {
type: Array,
default: []
},
showPhotos: {
type: Boolean,
default: false
}
}
});
const Bar = { template: '<div>bar</div>' }
const Foo = { template: '<div>foo</div>' }
const routes = [
{ path: '/weedings', component: Series },
{ path: '/', component: Foo },
{ path: '/family', component: Foo },
{ path: '/other', component: Foo },
{ path: '/videos', component: Bar },
{ path: '/blog', component: Bar },
{ path: '/about', component: Foo },
{ path: '/contacts', component: Bar }
]
const router = new VueRouter({
routes // short for routes: routes
});
var app = new Vue({
el: "#app",
router,
data: {
series: [],
currentSerie: 0,
images: [],
showPhotos: false
},
methods: {
fetchSeries: function(){
this.$http.get('/api/fetchSeries').then((response) => {
this.series = response.body
}, (response) => {
alert("fail")
});
},
fetchPhotos: function(id){
this.showPhotos = false;
this.$http.get('/api/fetchPhotos/'+id).then((response) => {
this.images = response.body
this.showPhotos = true;
$("html, body").animate({ scrollTop: 60 }, "500");
}, (response) => {
alert("fail")
});
},
photos: function(id){
this.fetchPhotos(id)
}
},
created: function(){
this.fetchSeries()
setTimeout(function(){ require('./custom'); }, 1000);
}
});
When I dont use vue-router, all works fine. And i know i can pass data to components in this way: <my-component :artribute="value"></my-component>, but in this case IDK how to pass data.

Answer 1

Use function mode like this:
{
path: '/weedings',
component: Series,
props: () => (
{ series: app.series, images: app.images, showPhotos: app.showPhotos }
)
}
Check working example in JSFiddle.
Note: You have to use vuex as a centralized store for all the components in an application to be able to implement more complex scenarios.

Answer 2

In your routes declaration you should add props
`const routes = [
{ path: '/weedings', component: Series, props: true}]`
Here mentioned: Passing props to Vue.js components instantiated by Vue-router