javascript - 如何将Html布局加载到vuejs组件中？

Question

我正在使用 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 的前端。

Answer 1

您可以使用 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>