<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">
<p 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="vote">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>
</p>
</body>
<script src="http://v1.vuejs.org/js/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;
})
},
vote: function(){
for(var i=0;i<this.candidates.length;i++){
this.candidates[i].votes++; //问题在这里~~~~~~~~~~
}
}
}
})
</script>
</html>当每次点击按钮的时候，所有的votes都++了，怎么样才能单独的votes++呢？
いいねを押す +0
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
走同样的路，发现不同的人生