Skip to content

Instantly share code, notes, and snippets.

/index.html

Created January 16, 2017 10:15
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/7c8c3405c3de075b2c69c961618e82d2 to your computer and use it in GitHub Desktop.
Save anonymous/7c8c3405c3de075b2c69c961618e82d2 to your computer and use it in GitHub Desktop.
Download ZIP
Parent-Child Communication // source https://jsbin.com/petayixama
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Parent-Child Communication</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="app" class="container text-center">
<p style="font-size: 60px"> {{votes}} </p>
<div class="row">
<food @voted="countVotes" name="Burger"></food>
<food @voted="countVotes" name="Sandwitch"></food>
<food @voted="countVotes" name="Jilapi"></food>
</div>
<ul class="list-group" style="margin-top: 20px;">
<li class="list-group-item" v-for="vote in log">{{ vote }}</li>
</ul>
</div>
<template id="food">
<div class="col-xs-4 text-center">
<p style="font-size: 30px">{{ votes }}</p>
<button class="btn btn-primary" @click="vote">{{name}}
</div>
</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script id="jsbin-javascript">
Vue.component('food', {
template: '#food',
props: ['name'],
data() {
return {
votes: 0,
log: []
}
},
methods: {
vote(event) {
this.votes++
this.$emit('voted', event.srcElement.innerText)
}
}
})
new Vue({
el: '#app',
data: {
votes: 0,
log: []
},
methods: {
countVotes(foodName) {
this.votes++
this.log.push(foodName + ' has got a vote')
}
}
})
</script>
<script id="jsbin-source-javascript" type="text/javascript">Vue.component('food', {
template: '#food',
props: ['name'],
data() {
return {
votes: 0,
log: []
}
},
methods: {
vote(event) {
this.votes++
this.$emit('voted', event.srcElement.innerText)
}
}
})
new Vue({
el: '#app',
data: {
votes: 0,
log: []
},
methods: {
countVotes(foodName) {
this.votes++
this.log.push(foodName + ' has got a vote')
}
}
})</script></body>
</html>
Raw
jsbin.petayixama.js
Vue.component('food', {
template: '#food',
props: ['name'],
data() {
return {
votes: 0,
log: []
}
},
methods: {
vote(event) {
this.votes++
this.$emit('voted', event.srcElement.innerText)
}
}
})
new Vue({
el: '#app',
data: {
votes: 0,
log: []
},
methods: {
countVotes(foodName) {
this.votes++
this.log.push(foodName + ' has got a vote')
}
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment