Vue找不到元素

Question

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

謝謝！

Answer 1

如果您已經擁有：

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>