我正在使用 Vuejs cdn。我在其中有一个导航菜单。我想在用户点击导航菜单时加载不同的布局。
例如
<div class="row" id="mytemplate">
<div class="col-sm-3 sidebar-col">
<div>
<nav class="settings-sidebar">
<h4>Profile settings</h4>
<ul>
<li class="active" v-on:click="Profile()">
<a >Profile picture</a>
</li>
<li class="" v-on:click="Business()">
<a >Business details</a>
</li>
<li class="" v-on:click="Equipments()">
<a >Equipments details</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="col-sm-9 col-xs-12 settings-body">
{{ load_layout_here }}
</div>
现在,当用户单击“业务详细信息”选项时,它应该运行函数 Business()
并从 business.html 或 business.php 加载布局
business.php 中的示例代码
<div class="form">
<div class="input-field">
<h5>Business name</h5>
<input type="text" class="textbox" name="primary-phone" value="Perfect choice movers" placeholder="Your business name" maxlength="15">
</div>
<div class="input-field inline-input">
<h5>City</h5>
<input type="text" class="textbox " name="business-city" value="myCity" placeholder="Business address" maxlength="15">
</div>
<button class="btn btn-orange" type="submit">Save</button>
我的 vue.js 代码是
var app2 = new Vue({
el: '#mytemplate',
data : {
message : 'hi',
},
methods: {
Profile : function () {
this.message = 'Profile';
},
Business : function () {
// Here I want to call Html Template to load seprate layout
this.message = 'Business';
},
Equipments : function () {
this.message = 'Equipments';
}
}
})
我在互联网上看到了很多答案,但他们都使用 vue 模板引擎或 .vue 文件。我不想使用的
注意:我使用 CodeIgniter 作为 PHP 框架。和 Vue 的前端。
最佳答案
您可以使用 axios 来呈现 html。响应数据变量中有什么数据。这应该表明。
Profile : function () {
axios.get('profile.php')
.then(function (response) {
console.log(response.data);
// response
this.message = response.data.json;
})
.catch(function (error) {
// handle error
console.log(error);
});
}
要使用 axios,您必须包含 cdn 文件。
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
关于javascript - 如何将Html布局加载到vuejs组件中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52413140/