JSFiddle - React, Tailwind, and code Playground

by Norlihazmey Ghazali

HTML

<div id="app">
	<div v-for="todo in todos">
			<todo-component :todo="todo" @hellothere="hellothere"></todo-component>
	</div>
</div>

Vue

Vue.component('todo-component', {
	props: ['todo'],
	template: "<div @click='hellofromchild(todo)'>{{ todo.title }}</div>",
	methods: {
		hellofromchild: function(todo) {
			// calling parent's method from components via Emit
			this.$emit('hellothere', {
				todo: todo
			})
		}
	}
})

new Vue({
	el: '#app',
	components: ['todo-component'],
	data: function() {
		return {
			todos: [{
				title: 'Cooking'
			}, {
				title: 'Coding'
			}]
		}
	},
	methods: {
		hellothere: function(e) {
			alert(e.todo.title)
		}
	}
});