Send data to components in VueJS + Vue Router

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.

Are you using any preprocessor? What is the second parameter in the `Vue.component()`, I've never seen a signature with three parameters for component registration, but I may be wrong. — Mat J, Jan 09 '17 at 09:03
I use webpack (Laravel Elixir). Look here default app.js from laravel https://github.com/laravel/laravel/blob/master/resources/assets/js/app.js — Nicolae Casîr, Jan 09 '17 at 09:10
In your link, the `Vue.component()` call has two parameters which is correct, here your code has three. — Mat J, Jan 09 '17 at 10:53
And you shouldn't be calling the `Vue.component` multiple times for same component registration(`Series` is registered once at the top, then re-registered in routes definition). — Mat J, Jan 09 '17 at 10:56
@MathewJibin, my bad, forgot to edit this. `var Series = Vue.component('Series', require('./components/Series.vue'),{ props: { series: { type: Array, default: [] }, images: { type: Array, default: [] }, showPhotos: { type: Boolean, default: false } } }); const routes = [ { path: '/weedings', component: Series }, ]` — Nicolae Casîr, Jan 09 '17 at 11:12
Please dont share code in comments, you'll further get comments asking for same code. Edit it into question. — Mat J, Jan 09 '17 at 11:12
Your third argument to `Vue.component()` call doesn't make any sense. It accepts only two parameters and second one being the options argument, is being imported from the file `./components/Series.vue`, your third argument is probably being ignored. Are you sure the options defined in that file has all properties defined correctly? — Mat J, Jan 09 '17 at 11:51

Hafez Divandari · Answer 1 · 2019-12-13T16:14:42.030

3

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.

edited Dec 13 '19 at 16:14

answered Aug 03 '17 at 23:42

Hafez Divandari

8,381
4
46
63

score 0 · Answer 2 · edited May 23 '17 at 12:17

0

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

edited May 23 '17 at 12:17

Community

1
1

answered Apr 10 '17 at 17:56

Bogomil Krastev

1
2

From the docs: When props is set to true, the route.params will be set as the component props. – tgf Jan 25 '18 at 00:12

Send data to components in VueJS + Vue Router

2 Answers2