JSFiddle - React, Tailwind, and code Playground

by Nasir Khan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>
<body>
    <div id="app"></div>
</body>

JavaScript

Vue.component('child', {
		props:['data'],
    template: `
        <div>
            data# {{data}}: {{messages}}
            <input type="text" v-model="text" placeholder="add some data then delete it">
            <button @click="addMessage">Add</button>
            <button @click="$emit('delete-me')">Delete</button>
        </div>`,
        data() {
        	return {
          	messages:[],
            text: ''
          }
        },
        methods: {
        	addMessage() {
          	this.messages.push(this.text)
            this.text = ''
          }
        }
})

Vue.component('parent', {
    template: `
        <div>
            Keep Adding new Instances 
            <button @click="newChild">New</button>
            <hr />
            <child v-for="(child, index) in children"
            v-on:delete-me="deleteThisRow(index)" keys="index"
            :data="child"
            ></child>
        </div>`,
        data() {
        	return {
          	children:[]
          }
    },
    methods: {
    	newChild() {
      	this.children.push(this.children.length)
      },
      deleteThisRow(index) {
            this.children.splice(index, 1);
        }
    }
})

new Vue({
    el: '#app',
    template: `
        <div>
        		<parent />
            
        </div>
    `,
    
    methods: {
        
    }
})