Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

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 co components in this way: , but in this case IDK how to pass data(

share|improve this question
    
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. – Mathew Jibin Jan 9 at 9:03
    
I use webpack (Laravel Elixir). Look here default app.js from laravel github.com/laravel/laravel/blob/master/resources/assets/js/… – Nicolae Casîr Jan 9 at 9:10
    
In your link, the Vue.component() call has two parameters which is correct, here your code has three. – Mathew Jibin Jan 9 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). – Mathew Jibin Jan 9 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 9 at 11:12

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.