VueJS - Swap component on click

Question

In my application I have many buttons. When I press it the button I would like to load a template (that replaces the selected button):

Templates:

Vue.com         


        

Answer 1

You need to bind a variable to :is property. And change this variable on button click. Also you will need to combine it with some v-show condition. Like so:

<div id="toReplace">
    <div :is="currentComponent"></div>
    <div v-show="!currentComponent" v-for="component in componentsArray">
      <button @click="swapComponent(component)">{{component}}</button>
    </div>
</div>
<button @click="swapComponent(null)">Close</button>

new Vue({
  el: 'body',
  data: {
    currentComponent: null,
    componentsArray: ['foo', 'bar']
  },
  components: {
    'foo': {
      template: '<h1>Foo component</h1>'
    },
    'bar': {
      template: '<h1>Bar component</h1>'
    }
  },
  methods: {
    swapComponent: function(component)
    {
      this.currentComponent = component;
    }
  }
});

Here is quick example:

http://jsbin.com/miwuduliyu/edit?html,js,console,output