在 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>.
最佳答案
正如 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;
}
}
})
这应该可以实现您想要实现的目标。如果有帮助请告诉我!
关于laravel - vue.js 2.0 在 laravel 5.3 中动态加载组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41448048/