Vue.js অজানা কাস্টম উপাদান

Question 1

আমি ভ্যু.জেএস এর সাথে এক শিক্ষানবিশ এবং আমি এমন একটি অ্যাপ্লিকেশন তৈরি করার চেষ্টা করছি যা আমার প্রতিদিনের কাজগুলি সরবরাহ করে এবং আমি ভ্যু উপাদানগুলিতে চলে এসেছি। সুতরাং নীচে আমি চেষ্টা করেছি কিন্তু দুর্ভাগ্যক্রমে, এটি আমাকে এই ত্রুটি দেয়:

vue.js: 1023 [ভ্যু সতর্কতা]: অজানা কাস্টম উপাদান: - আপনি উপাদানটি সঠিকভাবে নিবন্ধভুক্ত করেছেন? পুনরাবৃত্তির উপাদানগুলির জন্য, "নাম" বিকল্পটি সরবরাহ করা নিশ্চিত করুন।

কোন ধারণা, সাহায্য, দয়া করে?

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>

স্নিপেট প্রসারিত করুন

Question 2

আপনি componentsআপনার বিভাগটি সম্পর্কে ভুলে গেছেন Vue initialization। সুতরাং ভ্যু আসলে আপনার উপাদান সম্পর্কে জানেন না।

এটিকে পরিবর্তন করুন:

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() {

 }

});

এবং এখানে জেএসবিন রয়েছে, যেখানে সমস্তগুলি সঠিকভাবে কাজ করে বলে মনে হচ্ছে: http://jsbin.com/lahawepube/edit?html,js , আউটপুট

হালনাগাদ

কখনও কখনও আপনি চান যে আপনার উপাদানগুলি বিশ্বব্যাপী অন্যান্য উপাদানগুলির কাছে দৃশ্যমান হোক।

এক্ষেত্রে আপনাকে নিজের উপাদানগুলি এইভাবে নিবন্ধকরণ করতে হবে আপনার Vue initializationবা তার আগে export(যদি আপনি অন্য উপাদান থেকে উপাদানটি নিবন্ধ করতে চান)

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

আপনি নিজের উপাদানটির ভিতরে যুক্ত করার পরে আপনার vue el:

<example-component></example-component>

Question 3

শুধু Vue.component()আগে সংজ্ঞায়িত করুন new vue()।

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

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

হালনাগাদ

এইচটিএমএল রূপান্তর <anyTag> করে<anytag>
সুতরাং উপাদানটির নামের জন্য ক্যাপিটাল অক্ষরগুলি ব্যবহার করবেন না
পরিবর্তে <myTag>ব্যবহার<my-tag>

গিথুব ইস্যু: https://github.com/vuejs/vue/issues/2308

Question 4

এটি আমার জন্য এটি সমাধান করেছে: আমি একটি তৃতীয় যুক্তি একটি বস্তু হিসাবে সরবরাহ করেছি।

ইন app.js(লারাভেল এবং ওয়েবপ্যাকের সাথে কাজ করা):

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

Question 5

অতিরিক্ত ব্যবহার করবেন না Vue.component(), এটি বিশ্বব্যাপী উপাদানগুলি নিবন্ধভুক্ত করে। আপনি ফাইল তৈরি করতে পারেন, এটির নাম MyTask.vue রাখতে পারেন, সেখানে রফতানি করতে পারেন Vue অবজেক্ট https://vuejs.org/v2/guide/single-file-compferences.html এবং তারপরে আপনার মূল ফাইলে আমদানি করতে পারেন, এবং এটি রেজিস্টার করতে ভুলবেন না :

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

Question 6

আপনি উপাদানগুলিতে উপাদানটি যুক্ত করেছেন তা নিশ্চিত হন।

উদাহরণ স্বরূপ:

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

Question 7

সার্থকভাবে একটি উপাদান তৈরি করার জন্য এটি একটি ভাল উপায়।

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

Question 8

আমি যখন এই সমস্যাটি দেখছিলাম তখন https://vuejs.org/v2/guide/index.html এ ভ্যূ ডকুমেন্টেশনটি অনুসরণ করছিলাম।

পরে তারা সিনট্যাক্সটি স্পষ্ট করে:

এখনও অবধি, আমরা কেবল Vue.comp ভাগ ব্যবহার করে বিশ্বব্যাপী উপাদানগুলি নিবন্ধিত করেছি:
   Vue.component('my-component-name', {
       // ... options ...
   })
বিশ্বব্যাপী নিবন্ধিত উপাদানগুলি পরে তৈরি হওয়া কোনও মূল ভ্যু উদাহরণ (নতুন ভ্যু) এর টেম্পলেটে ব্যবহার করা যেতে পারে - এবং এমনকি এই ভ্যু ইনস্ট্যান্টের উপাদান গাছের সমস্ত> উপ-উপাদানগুলির মধ্যে।

( https://vuejs.org/v2/guide/components.html# সংগঠিত- উপাদানসমূহ )

উমেশ কদম যেমন উপরে বলেছেন, কেবল var app = new Vue({})তাত্ক্ষণিকতার আগে বিশ্বব্যাপী উপাদান সংজ্ঞা এসেছে কিনা তা নিশ্চিত করুন ।

Question 9

আমারও ত্রুটি ছিল

[ভ্যু সতর্কতা]: অজানা কাস্টম উপাদান: - আপনি উপাদানটি সঠিকভাবে নিবন্ধভুক্ত করেছেন? পুনরাবৃত্তির উপাদানগুলির জন্য, "নাম" বিকল্পটি সরবরাহ করা নিশ্চিত করুন।

যাইহোক, আমি সম্পূর্ণরূপে npm install && npm run devজেএস ফাইলগুলি সংকলন চালাতে ভুলে গেছি ।

সম্ভবত এটি আমার মতো নবাগতদের সহায়তা করে।

Question 10

ঠিক আছে, এই ত্রুটিটি সম্ভবত সুস্পষ্ট বলে মনে হতে পারে তবে একদিন আমি উত্তরটি সন্ধান করতে চাইছিলাম যে আমার কাছে 2 বার সংঘটিত ঘোষণা করা হয়েছে। এটি আমাকে বাদাম হিসাবে চালিয়ে যাচ্ছিল যেহেতু আপনি 2 বার এটি ঘোষণা করার সময় ভ্যুজেএস কোনও অভিযোগই করে না, স্পষ্টতই আমার মাঝে অনেক কোড ছিল এবং যখন আমি একটি নতুন উপাদান যুক্ত করেছি, তখন আমি ঘোষণাকে শীর্ষে রেখেছিলাম, যখন আমারও একটি ছিল নীচে কাছাকাছি। সুতরাং পরের বার এটি প্রথম অনুসন্ধান করে, অনেক সময় সাশ্রয় করে