Nieznany element niestandardowy Vue.js

Jestem początkującym użytkownikiem Vue.js i próbuję stworzyć aplikację, która zaspokoi moje codzienne zadania i natknąłem się na Vue Components. Więc poniżej jest to, co próbowałem, ale niestety daje mi ten błąd:

vue.js: 1023 [Vue warn]: Nieznany element niestandardowy: - czy poprawnie zarejestrowałeś komponent? W przypadku komponentów rekurencyjnych upewnij się, że podano opcję „nazwa”.

Jakieś pomysły, pomoc, proszę?

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>

Zapomniałeś o componentssekcji w swoim Vue initialization. Więc Vue tak naprawdę nie wie o twoim komponencie.

Zmień to na:

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

 }

});

A oto jsBin, gdzie wszystko wydaje się działać poprawnie: http://jsbin.com/lahawepube/edit?html,js,output

AKTUALIZACJA

Czasami chcesz, aby komponenty były globalnie widoczne dla innych komponentów.

W takim przypadku musisz zarejestrować swoje komponenty w ten sposób, przed Vue initializationlub export(w przypadku, gdy chcesz zarejestrować komponent z innego komponentu)

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

Po dodaniu komponentu do vue el:

<example-component></example-component>

Po prostu zdefiniuj Vue.component()wcześniej new vue().

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

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

aktualizacja

• HTML konwertuje <anyTag> do<anytag>
• Dlatego nie używaj wielkich liter jako nazwy komponentu
• Zamiast <myTag>używać<my-tag>

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

To mnie rozwiązało: podałem trzeci argument będący przedmiotem.

in app.js(praca z laravel i webpack):

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

Nie nadużywaj Vue.component(), rejestruje komponenty globalnie. Możesz utworzyć plik, nazwać go MyTask.vue, wyeksportować tam obiekt Vue https://vuejs.org/v2/guide/single-file-components.html, a następnie zaimportować go do głównego pliku i nie zapomnij go zarejestrować :

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

Upewnij się, że dodałeś komponent do komponentów.

Na przykład:

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

To dobry sposób na stworzenie komponentu w 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'
});

Śledziłem dokumentację Vue na https://vuejs.org/v2/guide/index.html, kiedy napotkałem ten problem.

Później wyjaśniają składnię:

Jak dotąd na całym świecie zarejestrowaliśmy tylko komponenty, używając komponentu Vue.com:

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

Globalnie zarejestrowane komponenty mogą być używane w szablonie dowolnej głównej instancji Vue (nowej Vue) utworzonej później - a nawet wewnątrz wszystkich> podkomponentów drzewa komponentów tej instancji Vue.

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

Tak więc, jak mówi Umesh Kadam powyżej, po prostu upewnij się, że definicja komponentu globalnego jest poprzedzona var app = new Vue({})instancją.

Miałem ten sam błąd

[Vue warn]: Nieznany element niestandardowy: - czy poprawnie zarejestrowałeś komponent? W przypadku komponentów rekurencyjnych upewnij się, że podano opcję „nazwa”.

jednak zupełnie zapomniałem uruchomić npm install && npm run devkompilacji plików js.

może to pomoże początkującym takim jak ja.

OK, ten błąd może wydawać się oczywisty, ale pewnego dnia szukałem odpowiedzi, PO PROSTU OKAZAŁEM SIĘ, ŻE MIAŁEM 2 razy zadeklarowane KOMPONENTY . doprowadzało mnie to do szału bo VueJS w ogóle nie narzeka gdy deklarujesz to 2 razy, oczywiste miałem dużo kodu w międzyczasie, a jak dodałem nowy komponent, deklarację umieściłem na górze, podczas gdy ja też miałem blisko dna. Więc następnym razem poszukaj tego najpierw, oszczędza dużo czasu