如何将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。

})

- hardik

---

只是好奇，为什么你不想使用Vue模板呢？因为如果这样的话，你就要试图重新发明轮子了。 - user5734311

@ChrisG 说实话，我对vueJs还比较陌生，而我的应用程序已经是使用CodeIgniter构建的。现在我想在我的应用程序中使用vueJs，但我不知道如何混合这两种技术。 - hardik

这不是Vue的初衷。如果你想在现有视图中开始使用Vue，请用Vue组件替换页面上的一些现有组件，让CI暂时处理路由。 - Alex

@hardik 没有很好的方法来混合两者，因为Vue应该处理整个前端并仅与服务器交换数据。我仍然不明白为什么你想使用Vue但不是按照预期的方式？我看不到任何好处。如果你是新手Vue，为什么不按照预期的方式使用它，而要把方形钉头塞进圆孔呢？ - user5734311

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>

- bimal sharma