Vue.js अज्ञात कस्टम तत्व

Question

मैं Vue.js के साथ एक शुरुआत कर रहा हूं और मैं एक ऐप बनाने की कोशिश कर रहा हूं जो मेरे दैनिक कार्यों को पूरा करता है और मैं Vue Components में भाग गया। तो नीचे जो मैंने कोशिश की है लेकिन दुर्भाग्य से, यह मुझे यह त्रुटि देता है:

vue.js: 1023 [Vue चेतावनी]: अज्ञात कस्टम तत्व: - क्या आपने घटक को सही ढंग से पंजीकृत किया है? पुनरावर्ती घटकों के लिए, "नाम" विकल्प प्रदान करना सुनिश्चित करें।

किसी भी विचार, मदद, कृपया?

new Vue({
  el : '#app',
  data : {
    tasks : [
      { name : "task 1", completed : false},
      { name : "task 2", completed : false},
      { name : "task 3", completed : true}
    ]
  },
  methods : {
  
  },
  computed : {
  
  },
  ready : function(){

  }

});

Vue.component('my-task',{
  template : '#task-template',
  data : function(){
    return this.tasks
  },
  props : ['task']
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<div id="app">
  <div v-for="task in tasks">
      <my-task :task="task"></my-task>
  </div>
  
</div>

<template id="task-template">
  <h1>My tasks</h1>
  <div class="">{{ task.name }}</div>
</template>

Answer 1

आप componentsअपने अनुभाग के बारे में भूल गए Vue initialization। इसलिए Vue वास्तव में आपके घटक के बारे में नहीं जानता है।

इसे इसमें बदलें:

var myTask = Vue.component('my-task', {
 template: '#task-template',
 data: function() {
  return this.tasks; //Notice: in components data should return an object. For example "return { someProp: 1 }"
 },
 props: ['task']
});

new Vue({
 el: '#app',
 data: {
  tasks: [{
    name: "task 1",
    completed: false
   },
   {
    name: "task 2",
    completed: false
   },
   {
    name: "task 3",
    completed: true
   }
  ]
 },
 components: {
  myTask: myTask
 },
 methods: {

 },
 computed: {

 },
 ready: function() {

 }

});

और यहाँ jsBin है, जहाँ सब सही ढंग से काम करता है: http://jsbin.com/lahawepube/edit?html,js,output

अपडेट करें

कभी-कभी आप चाहते हैं कि आपके घटक अन्य घटकों के लिए विश्व स्तर पर दिखाई दें।

इस मामले में आप से पहले, इस तरह से अपने घटकों रजिस्टर करने की आवश्यकता आपके Vue initializationया export(मामले में यदि आप अन्य घटक से घटक पंजीकृत करना चाहते हैं)

Vue.component('exampleComponent', require('./components/ExampleComponent.vue')); //component name should be in camel-case

आप अपने घटक को अपने अंदर जोड़ सकते हैं vue el:

<example-component></example-component>

Comments

इसलिए यदि मेरे पास कई घटक हैं, तो मुझे इसे घटक सरणी पर बाँधना चाहिए?

— जुलिवर गैलेटो

@CodeDemon सुनिश्चित करें। आप इसे छोटा बना सकते हैं यदि आप इसका उपयोग करेंगे ES6, जैसे कि components: {myTask},या यदि इसके कुछ छोटे घटक हैं, तो आप इसे componentsसंपत्ति के अंदर बना सकते हैं। लेकिन ऐसा लगता है कि ऐप स्केल के कारण यह अच्छा तरीका नहीं है।

— गोंग

कोई भी विचार क्यों मेरे पास यह चेतावनी है: vue.js: 1023 [Vue चेतावनी]: डेटा फ़ंक्शंस किसी ऑब्जेक्ट को वापस करना चाहिए। (घटक में पाया गया: <my-task>)?

— 4:31 बजे जूलिवर गैलेटो

आपको इसे घटकों में ऐसा लिखने की आवश्यकता है: data: function() { return { property1: 1, property2: 2 } }

— GONG

मेरे मामले के लिए, मैंने घटक के रूप में गलत तरीके से वर्तनी की थी। इसलिए, मुझे यह त्रुटि मिली।

— mehul9595

Answer 2

Vue.component()पहले परिभाषित करें new vue()।

Vue.component('my-task',{
     .......
});

new Vue({
    .......
});

अपडेट करें

• एचटीएमएल धर्मान्तरित <anyTag> करने के लिए<anytag>
• इसलिए घटक के नाम के लिए वशीकरण अक्षरों का उपयोग न करें
• <myTag>उपयोग के बजाय<my-tag>

गितुब अंक: https://github.com/vuejs/vue/issues/2308

Comments

यह समस्या का मुख्य उत्तर होना चाहिए। मैं vuejs डॉक्स से पुष्टि कर सकता हूं और यह कोशिश करके कि Vue.component को रूट (या ) से पहले रखा जाना चाहिए new Vue({})।

— फाबियान

Answer 3

इसने मेरे लिए इसे हल किया: मैंने एक वस्तु होने के तीसरे तर्क की आपूर्ति की।

में app.js(लार्वा और वेबपैक के साथ काम करना):

Vue.component('news-item', require('./components/NewsItem.vue'), {
    name: 'news-item'
});

Answer 4

अति प्रयोग न करें Vue.component(), यह विश्व स्तर पर घटकों को पंजीकृत करता है। आप फ़ाइल बना सकते हैं, इसे नाम दें MyTask.vue, वहां निर्यात करें Vue ऑब्जेक्ट https://vuejs.org/v2/guide/single-file-compenders.html और फिर अपनी मुख्य फ़ाइल में आयात करें, और इसे पंजीकृत करना न भूलें :

new Vue({
...
components: { myTask }
...
})

Answer 5

सुनिश्चित करें कि आपने घटक को घटक जोड़ दिया है।

उदाहरण के लिए:

export default {
data() {
    return {}
},
components: {
    'lead-status-modal': LeadStatusModal,
},
}

Answer 6

यह एक अच्छा तरीका है vue में एक घटक बनाने के लिए।

let template = `<ul>
  <li>Your data here</li>
</ul>`;

Vue.component('my-task', {
  template: template,
  data() {

  },
  props: {
    task: {
      type: String
    }
  },
  methods: {

  },
  computed: {

  },
  ready() {

  }
});

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

Answer 7

जब मैं इस मुद्दे पर भाग रहा था तो मैं https://vuejs.org/v2/guide/index.html पर Vue प्रलेखन के साथ चल रहा था ।

बाद में वे वाक्य रचना को स्पष्ट करते हैं:

अब तक, हमने केवल Vue.component का उपयोग करके विश्व स्तर पर घटकों को पंजीकृत किया है:

   Vue.component('my-component-name', {
       // ... options ...
   })

विश्व स्तर पर पंजीकृत घटकों को बाद में बनाए गए किसी भी रूट Vue उदाहरण (नए Vue) के टेम्पलेट में उपयोग किया जा सकता है - और यहां तक ​​कि Vue आवृत्ति के घटक ट्री के सभी> सब-कंप्यूटर्स के अंदर भी।

( https://vuejs.org/v2/guide/compenders.html#Organizing-Compords )

इसलिए जैसा कि ऊपर उमेश कदम कहते हैं, बस यह सुनिश्चित करें कि var app = new Vue({})तात्कालिकता से पहले वैश्विक घटक परिभाषा आती है।

Answer 8

मेरी भी यही त्रुटि थी

[Vue चेतावनी]: अज्ञात कस्टम तत्व: - क्या आपने घटक को सही ढंग से पंजीकृत किया है? पुनरावर्ती घटकों के लिए, "नाम" विकल्प प्रदान करना सुनिश्चित करें।

हालाँकि, मैं पूरी तरह npm install && npm run devसे js फ़ाइलों को संकलित करना भूल गया ।

शायद यह मेरी तरह newbies में मदद करता है।

Answer 9

ठीक है, यह त्रुटि स्पष्ट लग सकती है, लेकिन एक दिन मैं एक जवाब की तलाश में था कि मैं 2 बार घटक घोषित कर चुका हूं । यह मुझे पागल कर रहा था क्योंकि VueJS 2 बार घोषित करने पर बिल्कुल भी शिकायत नहीं करता है, जाहिर है कि मेरे बीच बहुत कोड था, और जब मैंने एक नया घटक जोड़ा, तो मैंने घोषणा को शीर्ष पर रखा, जबकि मेरे पास भी एक था नीचे के करीब। तो अगली बार यह पहली बार दिखता है, बहुत समय बचाता है