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'
}
})
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.
