首页 文章

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

提问于
浏览 次
2

单击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>.
laravel vue.js laravel-5.3 vuejs2

1 回答

  • 2

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

    这应该做你想要实现的目标 . 如果有帮助，请告诉我！

    回复于

相关问题