如何将 Html 布局加载到 vuejs 组件中？答案

【问题标题】：How to load Html layout into vuejs component?如何将 Html 布局加载到 vuejs 组件中？
【发布时间】：2019-02-24 01:23:42
【问题描述】：

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

【问题讨论】：

只是好奇，您为什么不想使用 Vue 模板，因为在这种情况下您只能尝试重新发明轮子？
@ChrisG 坦率地说，我是 vueJs 的新手，我的应用程序已经使用 CodeIgniter 构建。现在我想在我的应用程序中使用 vueJs，但我只是不知道如何混合使用。
这不是 Vue 的用途。如果您想在现有视图中开始使用 Vue，请开始用 Vue 组件替换页面上的一些现有组件，并让 CI 现在做路由。
@hardik 没有很好的混合两者的方法，因为 Vue 应该处理整个前端并且只与服务器交换数据。我还是不明白你为什么要使用 Vue 但没有按预期使用？我没有看到好的一面。如果您是 Vue 新手，为什么不按预期使用它，而不是将方形钉子强制插入圆孔？

标签： javascript html vue.js codeigniter-3

【解决方案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>

【讨论】：