[英]Define vue component in Laravel
我正在使用VueJS在视图中加载我的数据(使用Laravel)。 我确实在app.js文件中注册了组件,当我想在我的刀片文件之一中使用它们时,出现了以下错误:
(未知的自定义元素:-您是否正确注册了组件?对于递归组件,请确保提供“名称”选项。)
我的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>
谁能帮我解决这个问题?
在实例化根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'
});
注意:请勿将root vue实例安装在body
元素上。 最好创建一个具有#app
的id的wrapper元素, #app
在该wrapper元素上安装vue实例。
在建议警告的vue 2.0中不建议使用此方法。 查看发行说明
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.