Question

首次使用Vue并使用this wizard template作为学习工具。

我使用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>

Vue找不到元素

1 个答案: