Vue-Komponente in Laravel definieren

Question

Ich benutze VueJS, um meine Daten in Sicht zu laden (mit Laravel). Ich mache meine Komponenten in app.js Datei registrieren, und wenn ich sie in einer meiner Klinge Dateien verwenden möchten es gibt mir diese Fehlermeldung:

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

Meine app.js Datei:

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

Und hier verwendete ich meine Komponente:

<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> 

Kann mir jemand helfen, dies zu lösen?

Answer 1

die vue Komponenten registrieren, bevor Sie Ihr Root-vue Instanz

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

Hinweis instanziiert: keine root-vue-Instanz auf dem body Element montieren. Es ist besser, Sie erstellen ein Wrapper-Element mit einer ID wie #app und mounten Sie die Vue-Instanz auf diesem Wrapper-Element.

Dies wird nicht in vue 2.0 empfohlen, das eine Warnung erzeugt. Siehe release notes