Javascript Vue找不到元素

首次使用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>

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好向导

组件

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

/*eslint禁用无新*/
var rego=新的Vue({
el:“#应用程序”，
数据（）{
返回{
步骤：[
{
标签：“选择项目”，
插槽：“第1页”，
},
{
标签：“添加约束”，
插槽：“第2页”，
},
{
标签：“审查”，
插槽：“第3页”，
},
{
标签：“应用”，
插槽：“第4页”，
}
],
}
},
方法：{
下一次单击（当前页）{
console.log（'单击下一步'，当前页面）
return true//如果要阻止移动到下一页，请返回false
},
反向单击（当前页面）{
console.log（'点击后退'，当前页面）
return true//如果要阻止移动到上一页，则返回false
}
}
})

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