How to load Html layout into vuejs component?

user_4683616 0
Viewed 820

I am using Vuejs cdn. In which I have a Navigation menu. I want to load different layout when a user clicks on Nav menu.

for example 

<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>

Now when user click on "Business Details" option it should run function Business() and load layout from business.html or business.php

the sample code in 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>

My vue.js code is

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';
    }
}

})

I have seen lots of answers on the internet but they all using vue template engine or .vue files. Which I do not want to use

Note : I am using CodeIgniter as PHP framework. and Vue for frontend.

codeigniter-3 vue.js html javascript
1 Answers

You can use axios to render the html. What ever data come in response data variable. That should to show.

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);
    });
}

and to use axios, you have to include cdn file.

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
user_78247130
Related