60 lines
1.9 KiB
HTML
60 lines
1.9 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
|
||
|
|
<title>The Elections</title>
|
||
|
|
</head>
|
||
|
|
<!-- listening for keyboard event -->
|
||
|
|
<body @keyup.c="clear">
|
||
|
|
<div class="container">
|
||
|
|
<h1>People of Vue</h1>
|
||
|
|
<ul class="list-group">
|
||
|
|
<li v-for="candidate in candidates" class="list-group-item">
|
||
|
|
{{candidate.name}} {{candidate.votes}}
|
||
|
|
<!-- increase votes 'on:click'-->
|
||
|
|
<button class="btn btn-default" @click="candidate.votes++">Vote</button>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<!-- display the name of the 'mayor' using a computed property-->
|
||
|
|
<h2>Our mayor is {{mayor.name}}!</h2>
|
||
|
|
|
||
|
|
<pre>{{ $data | json }}</pre>
|
||
|
|
<pre>{{ mayor | json }}</pre>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
var vm = new Vue({
|
||
|
|
el: 'body',
|
||
|
|
data: {
|
||
|
|
candidates: [
|
||
|
|
{name: "Mr. Black", votes: 140},
|
||
|
|
{name: "Mr. White", votes: 135},
|
||
|
|
{name: "Mr. Pink", votes: 145},
|
||
|
|
{name: "Mr. Brown", votes: 130},
|
||
|
|
]
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
mayor: function () {
|
||
|
|
//first we sort the array descending
|
||
|
|
var candidatesSorted = this.candidates.sort(function (a, b) {
|
||
|
|
return b.votes - a.votes;
|
||
|
|
});
|
||
|
|
//the mayor will be the first item
|
||
|
|
return candidatesSorted[0];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
//this method runs when the key 'c' is pressed
|
||
|
|
clear: function () {
|
||
|
|
//Turn votes of all candidate to 0 using map() function.
|
||
|
|
this.candidates = this.candidates.map(function (candidate) {
|
||
|
|
candidate.votes = 0;
|
||
|
|
return candidate;
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
</html>
|