Неизвестный пользовательский элемент Vue.js

Я новичок в Vue.js, и я пытаюсь создать приложение, которое обслуживает мои повседневные задачи, и я столкнулся с компонентами Vue. Итак, ниже я пробовал, но, к сожалению, это дает мне эту ошибку:

vue.js: 1023 [Vue warn]: Неизвестный пользовательский элемент: - Вы правильно зарегистрировали компонент? Для рекурсивных компонентов обязательно укажите параметр «имя».

Есть идеи, помогите, пожалуйста?

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]: Неизвестный пользовательский элемент: - Вы правильно зарегистрировали компонент? Для рекурсивных компонентов обязательно укажите параметр «имя».

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

может это поможет новичкам вроде меня.

Хорошо, эта ошибка может показаться очевидной, но однажды я искал ответ, ЧТОБЫ УЗНАТЬ, ЧТО Я уже 2 раза объявлял КОМПОНЕНТЫ . это сводило меня с ума, поскольку VueJS вообще не жалуется, когда вы объявляете это 2 раза, очевидно, что у меня было много кода между ними, и когда я добавил новый компонент, я поместил объявление вверху, в то время как у меня также был один близко ко дну. Так что в следующий раз будет искать это в первую очередь, сэкономит много времени