Javascript Vue js:阻止排序对数组项进行排序,我只需要结果
我正在学习一个教程,你可以投票给市长候选人。它有一个排序函数用于确定获胜者。但是,sort函数还可以实时对候选对象进行排序。我想防止出现这种情况,因为候选人姓名和投票按钮不应上移或下移。我只需要结果的排序函数 HTMLJavascript Vue js:阻止排序对数组项进行排序,我只需要结果,javascript,arrays,sorting,vue.js,vuejs2,Javascript,Arrays,Sorting,Vue.js,Vuejs2,我正在学习一个教程,你可以投票给市长候选人。它有一个排序函数用于确定获胜者。但是,sort函数还可以实时对候选对象进行排序。我想防止出现这种情况,因为候选人姓名和投票按钮不应上移或下移。我只需要结果的排序函数 HTML <div class="container"> <div id="mayor-vote"> <h2>Mayor Vote</h2> <ul class="list-group" style="width:
<div class="container">
<div id="mayor-vote">
<h2>Mayor Vote</h2>
<ul class="list-group" style="width: 400px;">
<li v-for="candidate in candidates" class="list-group-item clearfix">
<div class="pull-left">
<strong style="display: inline-block; width: 100px;">{{ candidate.name }}:</strong> {{ candidate.votes }}
</div>
<button class="btn btn-sm btn-primary pull-right" @click="candidate.votes++">Vote</button>
</li>
</ul>
<h2>Our Mayor is <span class="the-winner" :class="textClass">{{ mayor.name }}</span></h2>
<button @click="clear" class="btn btn-default">Reset Votes</button>
<br><br>
<pre>
{{ $data }}
</pre>
</div>
</div>
这是一个有效的版本,如果你只是想得到市长,我。E投票数最大的候选人,不需要对数组进行排序,只需找到投票数最大的候选人,然后返回,如下所示。这将防止重新排列候选对象,因为您没有修改数组 见更新
new Vue({
el: '#mayor-vote',
data: {
candidates: [
{ name: "Mr. Black", votes: 140 },
{ name: "Mr. Red", votes: 135 },
{ name: "Mr. Pink", votes: 145 },
{ name: "Mr. Brown", votes: 140 }
]
},
computed: {
mayor: function(){
var candidateSorted = this.candidates.sort(function(a,b){
return b.votes - a.votes;
});
return candidateSorted[0];
},
textClass: function() {
return this.mayor.name.replace(/ /g,'').replace('Mr.','').toLowerCase();
}
},
methods: {
clear: function() {
this.candidates = this.candidates.map( function(candidate){
candidate.votes = 0;
return candidate;
})
}
}
});
computed: {
mayor: function(){
return this.candidates.slice(0).sort(
function(x, y) { return y.votes - x.votes })[0]
},