[Vuejs]-VueJs Dynamic template rendering

by

1👍

You can achieve this through dynamic components: https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components

Using your example: https://jsfiddle.net/dqws96mr/1/

const Greeting = Vue.component('greeting', {
  template: '<p>Hi, dude! <br/><button @click="clicked">Click me!</button> </p>', 
  methods: {
    clicked() {
        this.$emit('clicked');
    }
  }
});

var vm = new Vue({
  el: '#app',
  data() {
    return {
            myDynamicComponent: null
    }
  },
  methods: {
    clicked() {
         this.myDynamicComponent = 'greeting'
    },
    greetingClicked() {
        alert('Boo!');
    }
  }
});
👤Phil

Leave a comment