0
我有一個基本排序UI進行排序基於一些價值觀評論:Vue.js重新呈現有序陣列
部分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
(原始排序數組的值)。任何想法如何解決這個問題?
可以創建它的一個小提琴? – Saurabh