kevinruscoe/People.vue

## app.js
Vue.component('People', require('./components/People.vue'));
Vue.component('Person', require('./components/Person.vue'));

const app = new Vue({
    el: '#app'
});

## index.html
<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <title>index</title>
</head>

<body>

  <div id="app">
    <People></People>
  </div>

  <script src="js/app.js" type="text/javascript" charset="utf-8"></script>

</body>
</html>

## People.vue
<template>
    <ul id="People">
        <Person v-for="(person, index) in people"

            :name="person.name"
            :age="person.age"

            v-on:destroy="destroy"

        ></Person>
    </ul>
</template>

<script>
    export default {
        data: function(){
            return {
                people: [
                    {
                        name: "Kevin",
                        age: 28
                    },
                    {
                        name: "Adam",
                        age: 24
                    }
                ]
            }
        },
        methods: {
            destroy: function(person){
                this.people.splice(person, 1);
            }
        }
    }
</script>

## Person.vue
<template>
    <li @click="destroy">
        {{ name }} {{ age }}
    </li>
</template>

<script>
    export default {
        props: ['name', 'age'],
        methods: {
            destroy: function(){
                this.$emit('destroy', this);
            }
        }
    }
</script>
	Vue.component('People', require('./components/People.vue'));
	Vue.component('Person', require('./components/Person.vue'));

	const app = new Vue({
	el: '#app'
	});
	<html>
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>index</title>
	</head>

	<body>

	<div id="app">
	<People></People>
	</div>

	<script src="js/app.js" type="text/javascript" charset="utf-8"></script>

	</body>
	</html>
	<template>
	<ul id="People">
	<Person v-for="(person, index) in people"

	:name="person.name"
	:age="person.age"

	v-on:destroy="destroy"

	></Person>
	</ul>
	</template>

	<script>
	export default {
	data: function(){
	return {
	people: [
	{
	name: "Kevin",
	age: 28
	},
	{
	name: "Adam",
	age: 24
	}
	]
	}
	},
	methods: {
	destroy: function(person){
	this.people.splice(person, 1);
	}
	}
	}
	</script>
	<template>
	<li @click="destroy">
	{{ name }} {{ age }}
	</li>
	</template>

	<script>
	export default {
	props: ['name', 'age'],
	methods: {
	destroy: function(){
	this.$emit('destroy', this);
	}
	}
	}
	</script>