Vue js: Prevent Sort from sorting array items, I only need the result

Question

I'm following a tutorial where you can vote for a Mayoral Candidate. It has a sort function applied to it to determine the winner. However the sort function also sorts the candidates in real time. I want to prevent this because the Candidate Name and Vote buttons should not move up or down. I only need the sort function for the result.

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 - refer to computed property

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

Here's a working version, https://jsfiddle.net/7dadjbzs/

Clinton Green · Accepted Answer · 2016-12-08 02:22:53Z

2

If you just want to get the mayor, i. e. the candidate with maximum votes, you don't need to sort the array, you can just find the candidate with max votes, and return it, like following. This will prevent rearranging the candidate, as you are not modifying the array.

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

see updated fiddle.

edited Dec 8, 2016 at 2:22

Clinton Green

9,99323 gold badges73 silver badges109 bronze badges

answered Dec 8, 2016 at 2:04

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue js: Prevent Sort from sorting array items, I only need the result

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related