Vue js：防止Sort对数组项进行排序，我只需要结果答案

【问题标题】：Vue js: Prevent Sort from sorting array items, I only need the resultVue js：防止Sort对数组项进行排序，我只需要结果
【发布时间】：2016-12-08 01:54:37
【问题描述】：

我正在关注一个教程，您可以在其中为市长候选人投票。它应用了一个排序函数来确定获胜者。然而，排序功能也会对候选者进行实时排序。我想防止这种情况发生，因为候选人姓名和投票按钮不应上下移动。我只需要结果的排序函数。

HTML

<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>

JS - 引用计算属性

 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;
      })
    }
  }
});

这是一个工作版本，https://jsfiddle.net/7dadjbzs/

【问题讨论】：

标签： javascript arrays sorting vue.js vuejs2

【解决方案1】：

如果你只是想得到市长，我。 e.票数最多的候选人，您不需要对数组进行排序，您只需找到票数最高的候选人，然后将其返回，如下所示。这将防止重新排列候选人，因为您没有修改数组。

  computed: {
    mayor: function(){
      return this.candidates.slice(0).sort(
 function(x, y) { return y.votes - x.votes })[0]
    },

查看更新后的fiddle。

【讨论】：