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

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

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

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

Comments

आपके घटक के पास आपके Vue पर परिभाषित विधियों तक पहुंच नहीं है। आपको घटक changeSettingको विधि जोड़ने की आवश्यकता है 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 के दस्तावेज़ में घटक संकलन गुंजाइश के बारे में अधिक पढ़ सकते हैं ।

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

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

ऐसा लगता है कि सरल लेकिन यहाँ मैं क्या सलाह देता हूं।

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

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

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

Comments

क्या यह वर्तमान में सबसे पसंदीदा तरीका है? चीजें Vue में बहुत विकसित हो रही हैं, इसलिए मैं पूछूंगा

— Aseem

मैं Vue में कोई विशेषज्ञ नहीं हूं, लेकिन stackoverflow.com/questions/43292810/… पता चलता है कि आप अपने घटक से ऐप के फ़ंक्शन को कॉल कर सकते हैं $root। उदाहरण के लिए this.$root.changeSetting(value)सीधे घटक से changeSetting(..)इस मामले में। मेरे लिए अधिक सुविधाजनक लगता है ...

— आरयू

@ असीम: चीजों को समझने और बदलने में आसान बनाने के लिए कोड की चिंताओं को अलग करना कालातीत है। उत्तर में वर्णित विधि डेटा की चिंता और उस डेटा को प्रस्तुत करने की चिंता को अलग करती है और केवल एक उदाहरण है कि चीजें कैसे की जा सकती हैं। मैं दृष्टिकोण का मूल्यांकन नहीं करूंगा जैसे कि यह 'चालू' है लेकिन क्या यह कोड को बदलने और समझने में आसान बनाता है।

— विंग

@FlasHfromRu: आप चीजों को संदर्भित कर सकते हैं $rootलेकिन सामान्य तौर पर यह एक अच्छा विचार नहीं है। Vue के दस्तावेज़ से रूट इंस्टेंसेस तक पहुँचने पर इस नोट को देखें : "यह कुछ मुट्ठी भर घटकों के साथ डेमो या बहुत छोटे ऐप के लिए सुविधाजनक हो सकता है। हालांकि, पैटर्न मध्यम या बड़े पैमाने पर अनुप्रयोगों के लिए अच्छा नहीं है, इसलिए हम Vxx का उपयोग करने की दृढ़ता से सलाह देते हैं। " ज्यादातर मामलों में राज्य का प्रबंधन करने के लिए। ”

— विंग

Answer 2

किसी को भी उसी मूर्खतापूर्ण समस्या के साथ उतरना चाहिए जो मेरे पास है, सुनिश्चित करें कि आपके घटक के पास ' डेटा ' गुण सही ढंग से लिखा गया है। (उदा। डेटा , और दिनांक नहीं )

<template>
    <span>{{name}}</span>
</template>

<script>
export default {
  name: "MyComponent",
  data() {
    return {
      name: ""
    };
  }
</script>

Comments

गंभीरता से, मैं गंभीरता से मतलब है धन्यवाद

— नोनी

मेरे यहाँ 2020 में, मैंने DATE को लिखा

— Paaksing

lmfao ने इस टिप्पणी से मुझे बचाया

— Cris Ravazzano

यह उसी त्रुटि को फेंकता है जब आप अपनी संपत्ति के नामों को याद करते हैं। मेरे लिए यह इसलिए हुआ क्योंकि मैंने datasटेम्पलेट में बहुवचन का उपयोग किया था ।

— टोटमेडली

Should anybody land with the same silly problem I had, make sure your component has the 'data' property spelled correctly.Lol वास्तव में एक बहुत ही कठिन समस्या है :) धन्यवाद आदमी

— TarangP

Answer 3

मेरे मामले में कारण यह था, मैं केवल समापन को भूल गया

</script>

टैग।

लेकिन उसी त्रुटि संदेश के कारण।

Comments

यार ... वो तो था! मुझे यह कभी नहीं मिला।

— काइलफ्रिस

Answer 4

यह शायद वर्तनी की त्रुटि के कारण होता है

मुझे स्क्रिप्ट क्लोजिंग टैग में एक टाइपो मिला

</sscript>

Answer 5

साथ ही मेरे बिट को जोड़ने पर, मेरे जैसे किसी को भी संघर्ष करना चाहिए, ध्यान दें कि विधियाँ एक केस-संवेदी शब्द है:

<template>
    <span>{{name}}</span>
</template>

<script>
export default {
  name: "MyComponent",
  Methods: {
      name() {return '';}
  }
</script>

'विधियाँ' 'विधियाँ' होनी चाहिए

Comments

मेरे मामले में, मेरे पास एलओएल

— किक बटोस्की

Answer 6

यदि आप दो बार वीयू उदाहरण का उपयोग करते हैं। तब यह आपको यह त्रुटि देगा। उदाहरण के लिए app.js और व्यू फाइल में अपना स्क्रिप्ट टैग। बस एक समय का उपयोग करें

 const app = new Vue({
    el: '#app',
});

Answer 7

यह आरक्षित vuejs चर की वर्तनी में सबसे अधिक संभावना है। मुझे यहाँ मिला क्योंकि मैं computed:चूक गया और vuejs मेरी गणना की गई संपत्ति चर को नहीं पहचान पाएगा। इसलिए यदि आपके पास इस तरह की कोई त्रुटि है, तो पहले अपनी वर्तनी की जांच करें!

Answer 8

मुझे यह त्रुटि तब हुई जब मैंने तात्कालिकता के दौरान एक राज्य संपत्ति को एक घटक संपत्ति निर्दिष्ट करने की कोशिश की

export default {
 props: ['value1'],
 data() {
  return {
   value2: this.value1 // throws the error
   }
  }, 
 created(){
  this.value2 = this.value1 // safe
 }
}

Answer 9

मेरे पास दो methods:थे <script>, दिखाने के लिए जाता है, कि आप घंटों बिता सकते हैं जो किसी ऐसी चीज की तलाश में है जो इतनी सरल गलती थी।

Answer 10

मेरा मुद्दा यह था कि मैं अपने डेटा ऑब्जेक्ट के अंदर के तरीके रख रहा था। बस इसे इस तरह से प्रारूपित करें और यह अच्छी तरह से काम करेगा।

<script>
module.exports = {
    data: () => {
        return {
            name: ""
        }
    },
    methods: {
        myFunc() {
            // code
        }
    }
}
</script>

Answer 11

यदि आप इस समस्या का सामना कर रहे हैं, तो सुनिश्चित करें कि आपके पास नहीं है की जाँच करें

methods: {
...
}

या

computed: {
...
}

दो बार घोषित किया गया

Answer 12

मेरे मामले में यह एक संपत्ति थी जिसने मुझे त्रुटि दी, सही लेखन और फिर भी मुझे कंसोल में त्रुटि दी। मैंने बहुत खोज की और मेरे लिए कुछ भी काम नहीं किया, जब तक कि मैंने उसे Ctrl + F5 और Voilá नहीं दिया! त्रुटि दूर की गई। : 'वी