在Laravel中定義vue組件

Question

我正在使用VueJS在視圖中加載我的數據（使用Laravel）。我做我的註冊在app.js文件組件，而當我想以我的刀文件中的一個使用它們它給了我這個錯誤：

(unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.)

我app.js文件：

require('./bootstrap'); 
Vue.component('example', require('./components/Example.vue')); 

const app = new Vue({ 
    el: 'body' 
}); 

Vue.component(
    'passport-clients', 
    require('./components/passport/Clients.vue') 
); 

Vue.component(
    'passport-authorized-clients', 
    require('./components/passport/AuthorizedClients.vue') 
); 

Vue.component(
    'passport-personal-access-tokens', 
    require('./components/passport/PersonalAccessTokens.vue') 
); 

Vue.component('employer-enquiry-names', 
require('./components/Employer/Enquiry/Edit/Names.vue')); 
Vue.component('employer-enquiry-users', 
require('./components/Employer/Enquiry/Edit/Users.vue')); 
Vue.component('employer-enquiry-employer', 
require('./components/Employer/Enquiry/Edit/Employer.vue')); 

在這裏，我用我的組件：

<div class="tab-content" id="enquiry_tabs"> 
    <employer-enquiry-employer ref="employer_enquiry_employer"> 

    </employer-enquiry-employer> 

    <employer-enquiry-users ref="employer_enquiry_users"> 
    </employer-enquiry-users> 

    <div class="tab-pane fade" id="names"> 
     <employer-enquiry-names ref="employer_enquiry_names" > 
     </employer-enquiry-names> 
    </div> 
</div> 



<script> 
    var vm = new Vue({ el: '#enquiry_tabs' }); 
    vm.$refs.employer_enquiry_employer.loadData(); 
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
     var activatedTab = e.target; // activated tab 
     if (activatedTab.id == "names_link") { 
      vm.$refs.employer_enquiry_names.loadData(); 
     } else if (activatedTab.id == "users_link") { 
      vm.$refs.employer_enquiry_users.loadData(); 
     } else if (activatedTab.id == "employer_link") { 
      vm.$refs.employer_enquiry_employer.loadData(); 
     } 
     }); 
    </script> 

任何人都可以幫我解決這個問題嗎？

Answer 1

註冊VUE組件實例化之前，你的根VUE實例

require('./bootstrap'); 

// register components 

Vue.component('example', require('./components/Example.vue')); 

Vue.component(
    'passport-clients', 
    require('./components/passport/Clients.vue') 
); 

Vue.component(
    'passport-authorized-clients', 
    require('./components/passport/AuthorizedClients.vue') 
); 

Vue.component(
    'passport-personal-access-tokens', 
    require('./components/passport/PersonalAccessTokens.vue') 
); 

Vue.component('employer-enquiry-names', 
require('./components/Employer/Enquiry/Edit/Names.vue')); 
Vue.component('employer-enquiry-users', 
require('./components/Employer/Enquiry/Edit/Users.vue')); 
Vue.component('employer-enquiry-employer', 
require('./components/Employer/Enquiry/Edit/Employer.vue')); 

//instantiate root vue instance 

const app = new Vue({ 
    el: '#app' 
}); 

注：沒有在body元素上安裝根VUE實例。它更好地創建一個包裝元素，如#app在此包裝元素上掛載vue實例。

這不建議在vue 2.0中提供警告。看到release notes