JSFiddle - React, Tailwind, and code Playground

by Simon Herteby

HTML

<div id="vue">
  <button @click="items.push({id:Math.random(), children:[]})">Add item</button>
  <item v-for="item in items" :key="item.id" :item="item" :selected="item.id == selected" @click.native="selected = item.id" @add-child="item.children.push(item.children.length)"></item>
</div>

CSS

.item{
  padding:5px;
  cursor:pointer;
  border:1px solid #aaa;
}

JavaScript

new Vue({
	el:'#vue',
  data:{
  	items:[],
    selected:undefined
  },
  components:{
  	item:{
    	props:['item','selected'],
    	template:`
      <div class="item">
      	{{item.id}}
      	<div v-if="selected">
          <button @click="$emit('add-child')">Add child</button>
          <div v-for="child in item.children">{{child}}</div>
        </div>
      </div>`
    }
  }
})