Vue.js bilinmeyen özel öğe

Vue.js ile yeni başlayan biriyim ve günlük görevlerimi karşılayan bir uygulama oluşturmaya çalışıyorum ve Vue Components ile karşılaştım. Aşağıda denediğim şey var ama maalesef bana şu hatayı veriyor:

vue.js: 1023 [Vue warn]: Bilinmeyen özel öğe: - bileşeni doğru şekilde kaydettirdiniz mi? Özyinelemeli bileşenler için, "ad" seçeneğini sağladığınızdan emin olun.

Herhangi bir fikir, yardım lütfen?

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>

componentsSayfanızdaki bölümü unuttunuz Vue initialization. Yani Vue aslında bileşeninizden haberi yok.

Şununla değiştirin:

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

 }

});

Ve işte her şeyin doğru çalıştığı görünen jsBin: http://jsbin.com/lahawepube/edit?html,js,output

GÜNCELLEME

Bazen bileşenlerinizin diğer bileşenlere küresel olarak görünmesini istersiniz.

Bu durumda, bileşenlerinizi bu şekilde, önce Vue initializationveya export(diğer bileşenden bileşeni kaydetmek istiyorsanız) kaydetmeniz gerekir.

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

Bileşeninizi şunlara ekledikten sonra vue el:

<example-component></example-component>

Daha Vue.component()önce tanımlayın new vue().

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

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

Güncelleme

• HTML dönüştürür <anyTag> etmek<anytag>
• Bu nedenle bileşenin adı için büyük harf kullanmayın
• Yerine <myTag>kullanımı<my-tag>

Github sorunu: https://github.com/vuejs/vue/issues/2308

Bu benim için sorunu çözdü: Nesne olarak üçüncü bir argüman sağladım.

içinde app.js(laravel ve webpack ile çalışırken):

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

Aşırı kullanmayın Vue.component(), bileşenleri küresel olarak kaydeder. Dosya oluşturabilir, MyTask.vue olarak adlandırabilir, Vue nesnesini https://vuejs.org/v2/guide/single-file-components.html dışa aktarabilir ve ardından ana dosyanıza içe aktarabilir ve kaydetmeyi unutmayın :

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

Bileşeni bileşenlere eklediğinizden emin olun.

Örneğin:

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

Bu, vue'de bir bileşen oluşturmanın iyi bir yoludur.

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

Bu sorunla karşılaştığımda https://vuejs.org/v2/guide/index.html adresindeki Vue belgelerini takip ediyordum .

Daha sonra sözdizimini açıklarlar:

Şimdiye kadar, bileşenleri Vue.component kullanarak yalnızca global olarak kaydettik:

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

Global olarak kaydedilmiş bileşenler, daha sonra oluşturulan herhangi bir kök Vue örneğinin (yeni Vue) şablonunda ve hatta bu Vue örneğinin bileşen ağacının tüm> alt bileşenlerinin içinde kullanılabilir.

( https://vuejs.org/v2/guide/components.html#Organizing-Components )

Umesh Kadam'ın yukarıda söylediği gibi, küresel bileşen tanımının var app = new Vue({})somutlaştırmadan önce geldiğinden emin olun .

Ben de aynı hatayı aldım

[Vue warn]: Bilinmeyen özel öğe: - bileşeni doğru şekilde kaydettirdiniz mi? Özyinelemeli bileşenler için, "ad" seçeneğini sağladığınızdan emin olun.

ancak, npm install && npm run devjs dosyalarını derlemeye çalışmayı tamamen unuttum .

belki bu benim gibi yeni başlayanlara yardımcı olur.

Tamam, bu hata apaçık görünebilir, ancak bir gün BİLEŞENLERİN 2 kez beyan edildiğini BULDUĞUMU BULMAK İÇİN bir cevap arıyordum . VueJS bunu 2 kez ilan ettiğinizde hiç şikayet etmediği için beni deli ediyordu, ortada çok fazla kodum vardı ve yeni bir bileşen eklediğimde beyanı en üste yerleştirdim, ben de bir tane vardı dibe yakın. Yani bir dahaki sefere önce bunu arar, çok zaman kazandırır