vue sort()方法報錯:“You may have an infinite update loop in a component”
阿新 • • 發佈:2018-11-19
html
<div class="box" v-for="(item,itemindex) in itemrank" :key="itemindex"> <div class="box-title" > <div class="title-item"><span class="item-tag item-color">{{item.classify}}</span></div> </div> <div class="table-responsive"> <table class="table table-striped"> <thead style="background: #f9f9f9;"> <tr> <th>排名</th> <th></th> <th>姓名</th> <th>工號</th> <th>完成數</th> <th>標準工時</th> <th>上班時間</th> <th>工時利用率</th> </tr> </thead> <tbody> <tr v-for="(rankdata,rankindex) in rank(item.list)" :key="rankindex"> <td ><span class="ranktag">{{rankindex+1}}</span></td> <td @click="clickImg($event,itemindex,rankindex)"><img class="smallimg" :class="bigger && x== itemindex&&y== rankindex?'selectimg':''" :onerror="defaultImg" :src="'http://aeshow/images/Employee/'+rankdata.photo" /> <img v-show="bigger && x== itemindex&&y== rankindex" class="bigimg" :onerror="defaultImg" :src="'http://aeshow/images/Employee/'+rankdata.photo" /> </td> <td>{{rankdata.name}}</td> <td>{{rankdata.cardId}}</td> <td>{{rankdata.complete}}</td> <td>{{rankdata.workT}}</td> <td>{{rankdata.StandTime}}</td> <td> <div class="progress progress-striped active"> <div aria-valuemax="200" aria-valuemin="0" role="progressbar" class="progress-bar" :style="{width:rankdata.CompRate/2+'%'}"> <span class="sr-only"></span> </div> <span class="proPercent">{{rankdata.CompRate}}%</span> </div> </td> </tr> </tbody> </table> </div> </div>
javascript
methods: {
rank: function(data) {
// return data.sort((a, b) => a.CompRate - b.CompRate).reverse();
return data.slice().sort((a, b) => a.CompRate - b.CompRate).reverse();
},
此處註釋的程式碼,為之前會報錯的方法。