vue.js 2.0 在 laravel 5.3 中动态加载组件答案

【问题标题】：vue.js 2.0 load component dynamically in laravel 5.3vue.js 2.0 在 laravel 5.3 中动态加载组件
【发布时间】：2017-05-17 19:30:53
【问题描述】：

在 vuejs 2.0 和 laravel 5.3 中单击列表项时是否可以动态加载组件？我有一个标准的 Laravel 应用程序，但在网站的一个部分（显示报告）我想使用 vuejs 将此页面转换为单页应用程序。我使用 vue 组件加载默认报告，一切正常，如下所示：

        <div class="col-md-3 col-sm-6">
            <div class="card-box">
                <h2>Reports</h2><br>
                <ul>
                    <li>Daily</li>
                    <li>Weekly</li>
                    <li>Season</li>
                    <li>Label</li>
                    <li></li>
                </ul>
            </div>
        </div>
        <div class="col-md-9 col-sm-6">
            <div class="card-box main">
                <reports-homepage></reports-homepage>
            </div>
        </div>

我想要实现的是，当单击其中一个 li 项目时，<reports-homepage></reports-homepage> 会根据按下的 li 动态更改。例如，它可能变成<reports-daily></reports-daily>。

我尝试在 li 组件上添加 @click 并在刀片部分下面的脚本中捕获它，但这给了我以下错误：

[Vue warn]: Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>.

【问题讨论】：

您能否将您尝试过的代码也包含在内，即@click 和脚本？

标签： laravel vue.js laravel-5.3 vuejs2

【解决方案1】：

正如official documentation 中所指出的，您可以使用动态组件。在您的情况下，它可能看起来像这样：

HTML

<div id="app">
    <div class="col-md-3 col-sm-6">
        <div class="card-box">
            <h2>Reports</h2><br>
            <ul>
                <li @click="setComponent('daily')">Daily</li>
                <li @click="setComponent('weekly')">Weekly</li>
                <li @click="setComponent('season')">Season</li>
                <li @click="setComponent('label')">Label</li>
            </ul>
        </div>
    </div>
    <div class="col-md-9 col-sm-6">
        <div class="card-box main">
            <component v-bind:is="currentComponent"></component>
        </div>
    </div>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    currentComponent: 'daily'
  },
  components: {
    'daily': { /* component object */ },
    'weekly': { /* component object */ },
    'season': { /* component object */ },
    'label': { /* component object */ }
  },
  methods: {
    setComponent: function (component) {
        this.currentComponent = component;
    }
  }
})

这应该可以实现您想要实现的目标。如果有帮助，请告诉我！

【讨论】：