मैं ऐप से घटक तक डेटा पास नहीं कर सकता। रेंडर करने के बाद यह केवल स्पष्ट html दिखाता है, बिना Vue के डेटा के। सभी काम करता है, लेकिन डेटा के बिना ((

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);
    }

});

जब मैं वू-राउटर का उपयोग नहीं करता, तो सब ठीक काम करता है। और मुझे पता है कि मैं इस तरह से घटकों को डेटा पास कर सकता हूं: <my-component :artribute="value"></my-component>, लेकिन इस मामले में आईडीके डेटा कैसे पास करें।

1
Nicolae Casîr 9 जिंदा 2017, 11:53
क्या आप किसी प्रीप्रोसेसर का उपयोग कर रहे हैं? Vue.component() में दूसरा पैरामीटर क्या है, मैंने घटक पंजीकरण के लिए तीन पैरामीटर वाले हस्ताक्षर कभी नहीं देखे, लेकिन मैं गलत हो सकता हूं।
 – 
Mat J
9 जिंदा 2017, 12:03
मैं वेबपैक (लारवेल अमृत) का उपयोग करता हूं। लार्वा से डिफ़ॉल्ट ऐप.जेएस यहां देखें github.com/ लार्वा/लारवेल/ब्लॉब/मास्टर/संसाधन/संपत्ति/जेएस/…
 – 
Nicolae Casîr
9 जिंदा 2017, 12:10
आपके लिंक में, Vue.component() कॉल के दो पैरामीटर हैं जो सही है, यहां आपके कोड में तीन हैं।
 – 
Mat J
9 जिंदा 2017, 13:53
और आपको एक ही घटक पंजीकरण के लिए Vue.component कई बार कॉल नहीं करना चाहिए (Series शीर्ष पर एक बार पंजीकृत है, फिर मार्ग परिभाषा में फिर से पंजीकृत है)।
 – 
Mat J
9 जिंदा 2017, 13:56
@MathewJibin, मेरा बुरा, इसे संपादित करना भूल गया। 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
9 जिंदा 2017, 14:12

2 जवाब

इस तरह फ़ंक्शन मोड का प्रयोग करें:

{
    path: '/weedings',
    component: Series,
    props: () => (
        { series: app.series, images: app.images, showPhotos: app.showPhotos }
    )
}

JSFiddle में काम करने का उदाहरण देखें।

नोट: आपको vuex के सभी घटकों के लिए एक केंद्रीकृत स्टोर के रूप में उपयोग करना होगा अधिक जटिल परिदृश्यों को लागू करने में सक्षम होने के लिए एक आवेदन।

3
Hafez Divandari 13 पद 2019, 19:14

अपने मार्गों की घोषणा में आपको सहारा जोड़ना चाहिए

`const routes = [
    { path: '/weedings', component: Series, props: true}]` 

यहाँ उल्लेख किया गया है: Vue.js घटकों के लिए प्रॉप्स पास करना Vue-router द्वारा तत्काल किया गया

0
Community 23 मई 2017, 15:17
डॉक्स से: जब प्रॉप्स को सही पर सेट किया जाता है, तो रूट.परम्स को कंपोनेंट प्रॉप्स के रूप में सेट किया जाएगा।
 – 
tgf
25 जिंदा 2018, 03:12