Skip to content

Instantly share code, notes, and snippets.

/index.html

Created January 30, 2017 05:42
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/431baf01736937676f260a7f94a75609 to your computer and use it in GitHub Desktop.
Save anonymous/431baf01736937676f260a7f94a75609 to your computer and use it in GitHub Desktop.
Download ZIP
Event Emit - using bus // source https://jsbin.com/qutuwofayo
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<title>Event Emit - using bus</title>
</head>
<body>
<div id="app" class="container text-center">
<h1> {{votes}} </h1>
<button class="btn btn-warning" @click="reset">Reset Votes</button>
<button class="btn btn-danger" @click="stop">Stop</button>
<hr>
<div class="row">
<food @voted="countVote" name="Burger"></food>
<food @voted="countVote" name="Sandwitch"></food>
<food @voted="countVote" name="Salad"></food>
</div>
<hr>
<h2>Logs: </h2>
<ul class="list-group">
<li class="list-group-item" v-for="item in log">
{{ item }}
</li>
</ul>
</div>
<template id="food">
<div class="col-xs-4">
<h2>{{votes}} </h2>
<button class="btn btn-primary" @click="vote">{{name}}</button>
</div>
</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script id="jsbin-javascript">
var bus = new Vue()
Vue.component('food', {
template: '#food',
props: ['name'],
data() {
return {
votes: 0
}
},
methods: {
vote(e) {
this.votes++
bus.$emit('voted', e.srcElement.outerText)
},
reset() {
this.votes = 0
}
},
created() {
bus.$on('reset', this.reset)
}
})
new Vue({
el: '#app',
data: {
votes: 0,
log: []
},
methods: {
countVote(food) {
this.votes++
this.log.push('Voted for '+ food)
},
reset() {
this.votes = 0
this.log = []
bus.$emit('reset')
},
stop() {
bus.$off(['voted'])
}
},
created() {
bus.$on('voted', this.countVote)
}
})
</script>
<script id="jsbin-source-javascript" type="text/javascript">var bus = new Vue()
Vue.component('food', {
template: '#food',
props: ['name'],
data() {
return {
votes: 0
}
},
methods: {
vote(e) {
this.votes++
bus.$emit('voted', e.srcElement.outerText)
},
reset() {
this.votes = 0
}
},
created() {
bus.$on('reset', this.reset)
}
})
new Vue({
el: '#app',
data: {
votes: 0,
log: []
},
methods: {
countVote(food) {
this.votes++
this.log.push('Voted for '+ food)
},
reset() {
this.votes = 0
this.log = []
bus.$emit('reset')
},
stop() {
bus.$off(['voted'])
}
},
created() {
bus.$on('voted', this.countVote)
}
})</script></body>
</html>
Raw
jsbin.qutuwofayo.js
var bus = new Vue()
Vue.component('food', {
template: '#food',
props: ['name'],
data() {
return {
votes: 0
}
},
methods: {
vote(e) {
this.votes++
bus.$emit('voted', e.srcElement.outerText)
},
reset() {
this.votes = 0
}
},
created() {
bus.$on('reset', this.reset)
}
})
new Vue({
el: '#app',
data: {
votes: 0,
log: []
},
methods: {
countVote(food) {
this.votes++
this.log.push('Voted for '+ food)
},
reset() {
this.votes = 0
this.log = []
bus.$emit('reset')
},
stop() {
bus.$off(['voted'])
}
},
created() {
bus.$on('voted', this.countVote)
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment