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

Posted 2023-02-22

【中文标题】vue.js 2.0 在 laravel 5.3 中动态加载组件

【英文标题】：vue.js 2.0 load component dynamically in 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 和脚本？

【参考方案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;
    
  
)

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