vue通过v-for循环评论点击查看回复只显示自己这个评论的回复别的评论回复依然隐藏

在Vue中，可以通过设置一个data属性来控制每个评论是否显示回复。首先，你可以为每个评论添加一个showReply的属性，并将其默认值设为false。然后，使用v-for循环来渲染评论列表，并为每个评论添加一个“查看回复”的按钮。当点击按钮时，可以通过设置showReply属性为true来显示回复。

下面是一个示例代码：

<template>
  <div>
    <div v-for="comment in comments" :key="comment.id">
      <p>{{ comment.text }}</p>
      <button @click="toggleReply(comment)">
        {{ comment.showReply ? '隐藏回复' : '查看回复' }}
      </button>
      <div v-if="comment.showReply">
        <div v-for="reply in comment.replies" :key="reply.id">
          <p>{{ reply.text }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      comments: [
        {
          id: 1,
          text: '评论1',
          showReply: false,
          replies: [
            { id: 1, text: '回复1' },
            { id: 2, text: '回复2' }
          ]
        },
        {
          id: 2,
          text: '评论2',
          showReply: false,
          replies: [
            { id: 3, text: '回复3' },
            { id: 4, text: '回复4' }
          ]
        }
      ]
    };
  },
  methods: {
    toggleReply(comment) {
      comment.showReply = !comment.showReply;
    }
  }
};
</script>

在上面的示例中，comments数组包含了两个评论。每个评论对象都有一个showReply属性来控制回复的显示状态。当点击“查看回复”按钮时，toggleReply方法会切换showReply属性的值，从而显示或隐藏回复。

你可以根据自己的需求修改示例代码，例如添加更多的评论和回复，或者使用API从后端获取数据