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

Question

在 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 并在 Blade 部分下面的脚本中捕获它，但这给了我以下错误:

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

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

JS

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;
    }
  }
})

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