Vue.js重新呈現有序陣列

Question

我有一個基本排序UI進行排序基於一些價值觀評論：

部分CommentsSection模板：

<div v-if="numComments" class="tabs d-flex"> 
     <span class="text-muted">Sort by:</span> 
     <div class="tab" :class="{active: tab === 0}" @click="sortComments(0)">Rating</div> 
     <div class="tab" :class="{active: tab === 1}" @click="sortComments(1)">Newest</div> 
     <div class="tab" :class="{active: tab === 2}" @click="sortComments(2)">Oldest</div> 
</div> 

<ul v-if="numComments" class="comments-list"> 
     <li is="comment" @delete="numComments -= 1" v-for="comment in sortedComments" :data="comment"></li> 
</ul> 

CommentsSection：

export default { 
    name: 'comments-section', 
    components: { 
     CommentForm, 
     Comment 
    }, 
    props: ['comments', 'submissionId'], 
    data() { 
     return { 
      tab: 0, 
      numComments: this.comments.length, 
      sortedComments: this.comments.slice() 
     } 
    }, 
    created() { 
     this.sortComments(); 
    }, 
    methods: { 
     sortComments(type = 0) { 
      this.tab = type; 
      if (type === 0) { 
       this.sortedComments.sort((a, b) => b.rating - a.rating); 
      } else if (type === 1) { 
       this.sortedComments.sort((a, b) => moment(b.create_time).unix() - moment(a.create_time).unix()); 
      } else { 
       this.sortedComments.sort((a, b) => moment(a.create_time).unix() - moment(b.create_time).unix()); 
      } 
     }, 
     ... 
    } 
    ... 
} 

CommentSingle（組件正在列表中呈現）：

export default { 
    name: 'comment-single', 
    props: ['data'], 
    data() { 
     return { 
      agree: this.data.rated === 1, 
      disagree: this.data.rated === -1 
     } 
    } 
    ... 
} 

CommentSingle模板未被重新渲染，因此agree和disagree不更新。但是，實際列表在單擊每個排序選項卡時確實會進行正確排序，但列表中的每個註釋都有錯誤的agree和disagree（原始排序數組的值）。任何想法如何解決這個問題？

Answer 1

由key結合渲染分量解決：

<li is="comment" @delete="numComments -= 1" v-for="comment in sortedComments" :key="comment.id" :data="comment"></li> 

參考：https://vuejs.org/v2/guide/list.html#key