VueJS Dynamic change Component template Dynamic Components

VueJS Dynamic change Component template Dynamic Components

Welcome on infinityknow.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to VueJS – Dynamic change Component template – Dynamic Components

In this post we will show you Best way to implement How to change component template dynamically, hear for How to vue.js – Vue Js render dynamic information in template with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

HTML Part

<component :is="isactivepage"></component>
<a href="#" @click="isactivepage = 'live_contact-page'">live_contact</a>|
<a href="#" @click="isactivepage = 'myservices-page'">myservices</a>
<hr />

<!-- master.blade.php - is="{{ $isactivepage }}"-->
<component is="contact-page" inline-template>
<hr />
<h2>Contact us Page</h2>
<button @click="doSomething">Click me</button>
</component>

index.js (Javascript Part)

Vue.component('live_contact-page', {
template: '<h2>live_contact Page</h2'
});

Vue.component('myservices-page', {
template: '<h2>myservices Page</h2'
});

Vue.component('contact-page', {
methods: {
doSomething: function() {
  alert('simple welcome infinityknow.com Do Something :)');
}
}
});

new Vue({
el: 'body',

data: {
isactivepage: 'live_contact-page'
}
})

Example

I hope you have Got How to initialize a template dynamically And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.