JSFiddle - React, Tailwind, and code Playground

by simati

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
<div id="el">
    <people :items="people" @selectperson="handlePersonSelection"></people>
    
    <div>
        {{people | json}}
    </div>
</div>

<template id="component-template">
    <div>
        <div v-for="person in items" class="person" @click="handleClick(person)">
            {{person | json}}
        </div>
    </div>
</template>

CSS

.person {
    background-color: #FFF;
    margin: 2px;
    padding: 2px;
    border: transparent 2px solid;
    cursor: pointer;
}

.person:hover {
    border: #999 2px dashed;
}

JavaScript

var Component = Vue.extend({
	template: '#component-template',
    props: ['items'],
    methods: {
    	handleClick: function(person){
        	this.$dispatch('selectperson', person);
        }
    }
});

new Vue({
    el: '#el',
    data: {
    	people: [
        	{name: "Fred"},
        	{name: "Amelia"},
        	{name: "Gerald"},
        	{name: "Victor"},
        	{name: "Ashley"},
        	{name: "Herold"},
        	{name: "Karissa"}
        ]
    },
    methods: {
    	handlePersonSelection: function(person){
        	Vue.set(person, 'age', 20);
        }
    },
    components: {
    	people: Component
    }
});