[वू चेतावनी]: संपत्ति या विधि को उदाहरण पर परिभाषित नहीं किया गया है लेकिन

Question

var MainTable = Vue.extend({ 
    template: "<ul>" + 
    "<li v-for='(set,index) in settings'>" + 
    "{{index}}) " + 
    "{{set.title}}" + 
    "<button @click='changeSetting(index)'> Info </button>" + 
    "</li>" + 
    "</ul>", 
    data: function() { 
    return data; 
    } 
}); 

Vue.component("main-table", MainTable); 

data.settingsSelected = {}; 
var app = new Vue({ 
    el: "#settings", 
    data: data, 
    methods: { 
    changeSetting: function(index) { 
     data.settingsSelected = data.settings[index]; 
    } 
    } 
}); 

उपरोक्त कोड के साथ, बटन क्लिक होने पर नीचे दी गई त्रुटि होती है।

[वू चेतावनी]: संपत्ति या विधि "परिवर्तन सेटिंग" को उदाहरण पर परिभाषित नहीं किया गया है लेकिन प्रस्तुत करने के दौरान संदर्भित किया गया है। डेटा विकल्प में प्रतिक्रियाशील डेटा गुणों को घोषित करना सुनिश्चित करें। (<MainTable> में पाया)

Answer 1

समस्या

[Vue warn]: Property or method "changeSetting" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in <MainTable>)

क्योंकि changeSetting विधि MainTable घटक यहाँ में संदर्भित किया जा रहा है त्रुटि उत्पन्न हो रही है:

"<button @click='changeSetting(index)'> Info </button>" + 

हालांकि changeSetting विधि MainTable घटक में परिभाषित नहीं है। यह जड़ घटक यहाँ में परिभाषित किया जा रहा है:

var app = new Vue({ 
    el: "#settings", 
    data: data, 
    methods: { 
    changeSetting: function(index) { 
     data.settingsSelected = data.settings[index]; 
    } 
    } 
}); 

क्या याद करने की जरूरत है कि गुण और विधियों केवल गुंजाइश जहां वे परिभाषित कर रहे हैं में संदर्भित किया जा सकता है।

मूल टेम्पलेट में सब कुछ मूल दायरे में संकलित किया गया है; बाल टेम्पलेट में सब कुछ बाल दायरे में संकलित किया गया है।

आप Vue के documentation में घटक संकलन गुंजाइश के बारे में अधिक पढ़ सकते हैं।

मैं इसके बारे में क्या कर सकता हूं?

अभी तक सही दायरे में चीजों को परिभाषित करने के बारे में बहुत सी बात हुई है, इसलिए फिक्स परिभाषा को MainTable घटक में स्थानांतरित करने के लिए है?

ऐसा लगता है कि यह सरल है लेकिन यहां मैं अनुशंसा करता हूं।

शायद आप अपने MainTable घटक को एक गूंगा/प्रस्तुतिकरण घटक बनना चाहते हैं। (Here कुछ पढ़ने के लिए है यदि आप नहीं जानते कि यह क्या है लेकिन एक टीएल; डॉ यह है कि घटक कुछ प्रस्तुत करने के लिए ज़िम्मेदार है - कोई तर्क नहीं)। स्मार्ट/कंटेनर तत्व तर्क के लिए ज़िम्मेदार है - आपके प्रश्न में दिए गए उदाहरण में रूट घटक स्मार्ट/कंटेनर घटक होगा। इस आर्किटेक्चर के साथ आप घटक के लिए बातचीत करने के लिए वू के माता-पिता-बाल संचार विधियों का उपयोग कर सकते हैं। MainTable के लिए props के माध्यम से डेटा को पास करें और MainTable से अपने माता-पिता को events के माध्यम से उपयोगकर्ता क्रियाएं हटा दें। यह कुछ इस तरह दिख सकता है:

Vue.component('main-table', { 
    template: "<ul>" + 
    "<li v-for='(set, index) in settings'>" + 
    "{{index}}) " + 
    "{{set.title}}" + 
    "<button @click='changeSetting(index)'> Info </button>" + 
    "</li>" + 
    "</ul>", 
    props: ['settings'], 
    methods: { 
    changeSetting(value) { 
     this.$emit('change', value); 
    }, 
    }, 
}); 


var app = new Vue({ 
    el: '#settings', 
    template: '<main-table :settings="data.settings" @change="changeSetting"></main-table>', 
    data: data, 
    methods: { 
    changeSetting(value) { 
     // Handle changeSetting 
    }, 
    }, 
}), 

ऊपर आप क्या करते हैं और अपनी समस्या का समाधान करने के लिए किकस्टार्ट का एक अच्छा विचार देने के लिए पर्याप्त होना चाहिए।