Web Vue 评论系统前端实现(1)
数据设计
vue 数据驱动,怎么保存评论呢?
评论分 1 级 2 级. 有序,
1. comments , Array, 保存1级评论,不能用js的{},只能用[].
2. 子评论用 { id:[], ...}的结构,key=id,为以该id为parent的所有子评论
如何快速定位评论?对 1 级,需要用 index, 二级,需要用 id + index.
对于 2 级评论,id 变,则整个 2 级子评论跟着变化,data 里有这样的数据就不奇怪了:
{
cur_comment_id: "",
cur_sub_comments: [],
}
天坑在这里…因为对象数据不是响应式的: https://blog.csdn.net/qq_33576343/article/details/82794555
所以其实没必要用 cur…
// that.sub_comments_sets[comment_id] = paginator.data
that.$set(that.sub_comments_sets, comment_id, paginator.data);
-
问题 1 为了让评论及时刷新,把新的评论 slice 到 array 里.但是因为整体数据变化了,整体评论会刷新,而不是在原来的 dom 上添加;
-
问题 2
一次只能看 1 个子评论.切换子评论时,上一个消失.(cur 变了)
其实不用 cur 完全是可以的.