Vue.js невідомий спеціальний елемент

Я новачок у Vue.js і намагаюся створити програму, яка обслуговує мої щоденні завдання, і я зіткнувся з Vue Components. Отже, нижче я пробував, але, на жаль, це видає мені цю помилку:

vue.js: 1023 [попередження Vue]: Невідомий користувацький елемент: - Ви правильно зареєстрували компонент? Для рекурсивних компонентів обов’язково вкажіть опцію "name".

Будь-які ідеї, допомога, будь ласка?

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>

Ви забули про 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>

Просто визначте Vue.component()раніше new vue().

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

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

оновлення

• HTML конвертує <anyTag> в<anytag>
• Тому не використовуйте великі літери для назви компонента
• Замість <myTag>використання<my-tag>

Випуск Github: https://github.com/vuejs/vue/issues/2308

Це вирішило це для мене: я подав третій аргумент, який є об’єктом.

in app.js(робота з laravel та webpack):

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

Не зловживайте Vue.component(), це реєструє компоненти в усьому світі. Ви можете створити файл, назвати його MyTask.vue, експортувати туди об'єкт Vue https://vuejs.org/v2/guide/single-file-components.html, а потім імпортувати у свій основний файл, і не забудьте зареєструвати його :

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

Переконайтеся, що ви додали компонент до компонентів.

Наприклад:

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

Це хороший спосіб створити компонент у 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'
});

Коли я зіткнувся з цією проблемою, я слідував за документацією Vue за адресою https://vuejs.org/v2/guide/index.html .

Пізніше вони уточнюють синтаксис:

Наразі ми реєстрували компоненти лише у всьому світі, використовуючи Vue.component:

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

Глобально зареєстровані компоненти можна використовувати в шаблоні будь-якого кореневого екземпляра Vue (нового Vue), створеного згодом - і навіть усередині всіх> підкомпонентів дерева компонентів цього екземпляра Vue.

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

Отже, як вище сказав Умеш Кадам, просто переконайтеся, що визначення глобального компонента постає перед var app = new Vue({})створенням екземпляра.

У мене була та ж помилка

[Vue попереджає]: Невідомий користувацький елемент: - Ви правильно зареєстрували компонент? Для рекурсивних компонентів обов’язково вкажіть опцію "name".

однак я зовсім забув запустити npm install && npm run devкомпіляцію файлів js.

можливо, це допомагає новачкам, як я.

Добре, ця помилка може здатися очевидною, але одного разу я шукав відповіді ТІЛЬКИ ДЛЯ ЗНЯТИ, ЩО МІЙ БУЛО 2 рази оголошено КОМПОНЕНТИ . це зводило мене з розуму, оскільки VueJS взагалі не скаржиться, коли ви заявляєте про це 2 рази, очевидно, що у мене було багато коду між ними, і коли я додав новий компонент, я розмістив декларацію вгорі, хоча у мене теж була така близько до дна. Тож наступний раз шукає це перше, економить багато часу