web-dev-qa-db-ja.com

Vue.jsの未知のカスタム要素

私はVue.jsの初心者で、日々の仕事に応えるアプリを作成しようとしていますが、Vue Componentsに出くわしました。だから以下は私が試したものですが、残念ながら、それは私にこのエラーを与えます：

vue.js：1023 [Vue warn]：未知のカスタム要素： - コンポーネントを正しく登録しましたか？再帰的なコンポーネントの場合は、必ず "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>
javascriptvue.js
62
Juliver Galleto

Vue initializationのcomponentsセクションを忘れています。そのため、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

UPDATE

コンポーネントを他のコンポーネントからグローバルに見えるようにしたい場合があります。

この場合、Vue initializationまたはexportの前に、この方法でコンポーネントを登録する必要があります（他のコンポーネントからコンポーネントを登録する場合）。

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

あなたのコンポーネントをあなたのvue elの中に追加することができた後：

<example-component></example-component>
95
GONG

Vue.component()の前にnew vue()を定義するだけです。

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

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

更新

  • HTMLは<anyTag>を<anytag>に変換します
  • そのため、コンポーネントの名前には大文字を使用しないでください
  • <myTag>の代わりに<my-tag>を使用してください

Githubの問題： https://github.com/vuejs/vue/issues/2308

39
umesh kadam

これは、価値のあるコンポーネントを作成するための良い方法です。

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

これで私はそれを解決した：私はオブジェクトである第三引数を与えた。

app.js（laravelとwebpackを使った作業）：

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

コンポーネントにコンポーネントを追加したことを確認してください。

例えば：

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

私がこの問題に遭遇したとき、私は https://vuejs.org/v2/guide/index.html でVueドキュメンテーションに沿ってフォローしていました。

後で彼らは構文を明確にします：

これまでのところ、Vue.componentを使用して、グローバルにコンポーネントを登録しただけです。

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

グローバルに登録されたコンポーネントは、後で作成された任意のルートVueインスタンス（new Vue）のテンプレートで使用できます - そしてそのVueインスタンスのコンポーネントツリーのすべての>サブコンポーネントの中にさえも。

（ https://vuejs.org/v2/guide/components.html#Organizing-Components ）

そのため、Umesh Kadamが前述したように、グローバルコンポーネントの定義がvar app = new Vue({})インスタンス化の前にあることを確認してください。

0
Nathaniel Rink

Vue.component()を使いすぎないでください。コンポーネントをグローバルに登録します。 MyTask.vueという名前のファイルを作成し、そこにVueオブジェクトをエクスポート https://vuejs.org/v2/guide/single-file-components.html そしてあなたのメインファイルにインポートし、そしてそれを登録することを忘れないでください：

new Vue({
...
components: { myTask }
...
})
0
Arthur Kuznetsov