Vue

by WILLIAM CORREA

HTML

<div id="app">
  <div
    v-for="(component, index) in components"
    :key="index"
  >
    <label>{{ component.is }}</label>
    <input 
      type="checkbox"
      v-model="component.active"
    >
  </div>
  <hr>
  <div
    v-for="(component, index) in components"
    :key="`component-${index}`"
  >
    <component
      v-if="component.active"
      :is="component.is"
    >  
    </component>
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

const components = [
  {
  	active: false,
    is: 'Foo'
  },
  {
  	active: false,
    is: 'Bar'
  }
]

Vue.component('Foo', { template: '<p>Foo</p>' })
Vue.component('Bar', { template: '<p>Bar</p>' })

const myVue = new Vue({
	data: () => ({ components })
})

myVue.$mount('#app')