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)
E-junkie: Sell digital downloads online
E-junkie Provides a Copy-paste buy-now, and cart buttons for selling downloads, codes and tangible products on any website, blog, social media, email and messenger!
Also see:
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.