[英]Vue cannot find element
首次使用Vue,并将此向导模板用作学习工具。
我将Laravel
用作后端框架,并希望创建一个向导,其中每个选项卡的内容都包含在blade
模板中,而不是按照示例在webpack
编译JS时作为外部组件导入。
本质上,我希望内联示例中的模板(我认为!)。
我的HTML
正文包含:
<div is="app">
<div id="wizard" class="rego-panel-body">
<vue-good-wizard
:steps="steps"
:onNext="nextClicked"
:onBack="backClicked"
inline-template>
<div slot="page1">
<h4>Step 1</h4>
<p>This is step 1</p>
</div>
<div slot="page2">
<h4>Step 2</h4>
<p>This is step 2</p>
</div>
<div slot="page3">
<h4>Step 3</h4>
<p>This is step 3</p>
</div>
<div slot="page4">
<h4>Step 4</h4>
<p>This is step 4</p>
</div>
</vue-good-wizard>
</div>
</div>
在页面底部,我有以下JS:
<script>
Vue.component('vue-good-wizard', {
name: 'wizard',
template: '#vue-good-wizard',
data(){
return {
steps: [
{
label: 'Select Items',
slot: 'page1',
},
{
label: 'Add Constraints',
slot: 'page2',
},
{
label: 'Review',
slot: 'page3',
},
{
label: 'Apply',
slot: 'page4',
}
],
};
},
methods: {
nextClicked(currentPage) {
console.log('next clicked', currentPage);
return true; //return false if you want to prevent moving to next page
},
backClicked(currentPage) {
console.log('back clicked', currentPage);
return true; //return false if you want to prevent moving to previous page
}
},
});
/* eslint-disable no-new */
var rego = new window.Vue({
el: '#app',
render: h => h('vue-good-wizard')
});
</script>
我的主要app.js
文件包含:
import VueGoodWizard from './wizardrego'
Vue.use(VueGoodWizard);
其中./wizardrego
是示例随附的dist js文件。
当页面加载时我得到:
cannot find element #vue-good-wizard
整个div="app"
元素将从DOM
删除。
谢谢!
如果您已经拥有:
import VueGoodWizard from './wizardrego'
Vue.use(VueGoodWizard);
您不需要重新定义vue-good-wizard
组件。
<script>
/* eslint-disable no-new */
var rego = new Vue({
el: '#app',
data() {
return {
steps: [
{
label: 'Select Items',
slot: 'page1',
},
{
label: 'Add Constraints',
slot: 'page2',
},
{
label: 'Review',
slot: 'page3',
},
{
label: 'Apply',
slot: 'page4',
}
],
}
},
methods: {
nextClicked(currentPage) {
console.log('next clicked', currentPage)
return true //return false if you want to prevent moving to next page
},
backClicked(currentPage) {
console.log('back clicked', currentPage)
return true //return false if you want to prevent moving to previous page
}
}
})
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.