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インスタンスは注意

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

をインスタンス化する前にVUEのコンポーネントを登録します。はbody要素のルートVUEインスタンスをマウントしないでください。このラッパー要素にvueインスタンスをマウントすると、#appのようなIDを持つラッパー要素を作成する方が良いでしょう。

これはvue 2.0では推奨されていませんが、これは警告です。 release notes