vue通过v-for循环回复点击查看回复值显示自己这个评论的回复

你可以通过使用v-for循环来显示评论列表，并为每个评论添加一个点击事件，以便显示或隐藏该评论的回复。

首先，在你的数据中添加一个属性，用于表示每个评论是否显示回复。例如，你可以在每个评论对象中添加一个名为"showReply"的属性，初始值为false。

data() {
  return {
    comments: [
      { id: 1, content: "评论1", showReply: false, replies: [] },
      { id: 2, content: "评论2", showReply: false, replies: [] },
      { id: 3, content: "评论3", showReply: false, replies: [] },
    ],
  };
},

然后，在模板中使用v-for循环来显示评论列表，并为每个评论添加一个点击事件，以切换显示或隐藏该评论的回复。

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

最后，在方法中实现toggleReply方法，用于切换评论的showReply属性的值。

methods: {
  toggleReply(comment) {
    comment.showReply = !comment.showReply;
  },
},

这样，当你点击"查看回复"按钮时，就会切换该评论的showReply属性的值，从而显示或隐藏该评论的回复