JSFiddle - React, Tailwind, and code Playground

by Simon Herteby

HTML

<div id="vue">
  <div v-for="row in rows" @click="toggleChild(row)" class="row">
    {{row}}
    <childrow v-if="childRows.includes(row)" :row="row"></childrow>
  </div>
</div>

CSS

.row{
  padding:10px;
  border:1px solid #ccc;
}

JavaScript

new Vue({
	el:'#vue',
  data:{
  	rows:[1,2,3,4,5,6],
    childRows:[]
  },
  methods:{
  	toggleChild(row){
    	var i = this.childRows.indexOf(row)
    	if(i == -1){
      	this.childRows.push(row)
      } else {
      	this.childRows.splice(i,1)
      }
    }
  },
  components:{
  	childrow:{
    	template:`<div>Childrow {{row}}</div>`,
      props:['row'],
      mounted(){
      	console.log('mounted', this.row)
      },
      destroyed(){
      	console.log('destroyed', this.row)
      }
    }
  }
})