JSFiddle - React, Tailwind, and code Playground

by darkylmnx

HTML

<div id="app">
  <h1>Composant picker</h1>
  <nav>
    <button @click="myVar = 1">Composant A</button>
    <button @click="myVar = 2">Composant B</button>
    <button @click="myVar = 3">Composant C</button>
  </nav>
  <component :is="computedComp"></component>
</div>

Vue

const CompA = {
	template: '<p>Je suis le composant A</p>'
}

const CompB = {
	template: '<p>Composant B !</p>'
}

const CompC = {
	template: '<p>Euh... Je suis le dernier</p>'
}

const app = new Vue({
	el: '#app',
  
  data() {
  	return {
    	myVar: ''
    }
  },
  computed: {
  	computedComp() {
    	const myMap = {
      	'1': CompA,
        '2': CompB,
        '3': CompC
      }
      
      return myMap[this.myVar]
    }
  }
})