Vue.js 重新渲染排序数组

Posted 2023-02-23

【中文标题】Vue.js 重新渲染排序数组

【英文标题】：Vue.js re-rendering sorted array

【发布时间】：2017-07-31 09:00:20

【问题描述】：

我有一个基本的排序 UI，可以根据一些值对 cme​​ts 进行排序：

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（原始排序数组的值）。知道如何解决这个问题吗？

【问题讨论】：

可以创建一个小提琴吗？

【参考方案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