Vue js phần tử tùy chỉnh không rõ

Question

Tôi là người mới bắt đầu trên Vue JS và tôi đang cố gắng tạo ứng dụng phục vụ công việc hàng ngày của mình và tôi chạy đến một Thành phần Vue bên dưới là những gì tôi đã thử nhưng rất tiếc nó mang lại cho tôi lỗi này

vue.js: 1023 [Cảnh báo cảnh báo]: Yếu tố tùy chỉnh không xác định: - bạn đã đăng ký thành phần chính xác chưa? Đối với các thành phần đệ quy, hãy đảm bảo để cung cấp tùy chọn "tên".

Bất kỳ ý tưởng nào, xin vui lòng?

new Vue({ 
 
\t el : '#app', 
 
\t data : { 
 
\t \t tasks : [ 
 
\t \t \t { name : "task 1", completed : false}, 
 
\t \t \t { name : "task 2", completed : false}, 
 
\t \t \t { name : "task 3", completed : true} 
 
\t \t ] 
 
\t }, 
 
\t methods : { 
 
\t 
 
\t }, 
 
\t computed : { 
 
\t 
 
\t }, 
 
\t ready : function(){ 
 

 
\t } 
 

 
}); 
 

 
Vue.component('my-task',{ 
 
\t template : '#task-template', 
 
\t data : function(){ 
 
\t \t return this.tasks 
 
\t }, 
 
\t props : ['task'] 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script> 
 
<div id="app"> 
 
\t <div v-for="task in tasks"> 
 
\t \t \t <my-task :task="task"></my-task> 
 
\t </div> 
 
\t 
 
</div> 
 

 
<template id="task-template"> 
 
\t <h1>My tasks</h1> 
 
\t <div class="">{{ task.name }}</div> 
 
</template>

Answer 1

Bạn quên về components phần trong Vue initialization của bạn. Vì vậy, Vue thực sự không biết về thành phần của bạn.

Thay đổi nó để:

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

} 

}); 

Và đây là jsBin, nơi mà tất cả dường như hoạt động chính xác: http://jsbin.com/lahawepube/edit?html,js,output

CẬP NHẬT

Đôi khi bạn muốn các thành phần của bạn để được hiển thị trên toàn cầu trong khác các thành phần.

Trong trường hợp này bạn cần đăng ký thành phần của bạn theo cách này, trước khi bạn Vue initialization hoặc export (trong trường hợp nếu bạn muốn đăng ký thành phần từ các thành phần khác)

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

Sau khi bạn có thể thêm thành phần của bạn bên trong bạn vue el:

<example-component></example-component> 

Answer 2

Chỉ cần xác định Vue.component() trước new vue().

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

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

cập nhật

• HTML chuyển đổi <anyTag> để <anytag>
• Vì vậy, không sử dụng chữ captital cho tên thành phần của
• Thay vì sử dụng <myTag><my-tag>

Vấn đề Github: https://github.com/vuejs/vue/issues/2308