问题如下:
我插入一条新的评论为array[0],点赞第一条置顶评论,发生变化的确是第二条,vuex变化的也是第二条
整个评论区是父组件comment-list,一条评论是子组件comment-item
下面给出父组件评论区comment-list代码:
"loading"
:finished="finished"
finished-text="已显示全部评论"
:error="error"
error-text="加载失败,请点击重试"
:immediate-check="false"
@load="onLoad"
>
for="(item, index) in list"
:key="index"
:comment="item"
@reply-click="$emit('reply-click', $event)"
/>
给出子组件单条评论的comment-item代码:
<template>
<van-cell class="comment-item">
<van-image
slot="icon"
class="avatar"
round
fit="cover"
:src="comment.aut_photo"
/>
<div slot="title" class="title-wrap">
<div class="user-name">{{ comment.aut_name }}div>
<van-button
class="like-btn"
:class="{
liked: comment.is_liking
}"
:icon="comment.is_liking ? 'good-job' : 'good-job-o'"
:loading="commentLoading"
@click="onCommentLike"
>{{ comment.like_count || '赞' }}van-button>
div>
<div slot="label">
<p class="comment-content">{{ comment.content }}p>
<div class="bottom-info">
<span class="comment-pubdate">{{ comment.pubdate | relativeTime }}span>
<van-button
class="reply-btn"
round
@click="$emit('reply-click', comment)"
>回复 {{ comment.reply_count }}van-button>
div>
div>
van-cell>
template>
<script>
import { addCommentLike, deleteCommentLike } from '@/api/comment'
export default {
name: 'CommentItem',
components: {},
props: {
comment: {
type: Object,
required: true
}
},
data () {
return {
commentLoading: false,
com_data: this.comment
}
},
computed: {},
watch: {},
created () {},
mounted () {},
methods: {
async onCommentLike () {
console.log(this, '<< click action')
this.commentLoading = true
try {
if (this.comment.is_liking) {
// 已赞,取消点赞
await deleteCommentLike(this.comment.com_id)
this.com_data.like_count--
} else {
// 没有点赞,添加点赞
await addCommentLike(this.comment.com_id)
this.com_data.like_count++
}
this.com_data.is_liking = !this.com_data.is_liking
} catch (err) {
this.$toast('操作失败,请重试')
}
this.commentLoading = false
}
}
}
script>
<style scoped lang="less">
.comment-item {
.avatar {
width: 72px;
height: 72px;
margin-right: 25px;
}
.title-wrap {
display: flex;
justify-content: space-between;
align-items: center;
.user-name {
color: #406599;
font-size: 26px;
}
}
.comment-content {
font-size: 32px;
color: #222222;
word-break: break-all;
text-align: justify;
}
.comment-pubdate {
font-size: 19px;
color: #222;
margin-right: 25px;
}
.bottom-info {
display: flex;
align-items: center;
}
.reply-btn {
// width: 135px;
height: 48px;
line-height: 48px;
font-size: 21px;
color: #222;
}
.like-btn {
height: 30px;
padding: 0;
border: none;
font-size: 19px;
line-height: 30px;
margin-right: 7px;
.van-icon {
font-size: 30px;
}
&.liked {
color: #e5645f;
}
}
}
style>
寄,我的评论索引用的都是一个相同的index,应该区分开来,换成评论对应的com_id就解决了。