Vue js：ソートで配列項目をソートできないようにするには、結果が必要です。

Question

私は市長候補に投票できるチュートリアルに従っています。勝者を決定するためにソート機能が適用されています。しかし、sort関数は、候補をリアルタイムでソートします。候補者名と投票ボタンが上下に動くべきではないので、私はこれを避けたいと思います。私は結果のソート機能が必要です。

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

を参照してくださいあなただけの市長を取得したい場合はここで作業バージョンiは、https://jsfiddle.net/7dadjbzs/

Answer 1

です。 e。最大の票を持つ候補、あなたは配列をソートする必要はありません、あなたは最大の票を持つ候補を見つけることができますし、次のように、それを返します。これにより、配列を変更していないので、候補を並べ替えることができなくなります。

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

更新されたfiddleを参照してください。