vue通过v-for循环评论 给每条评论添加一个属性用于控制评论框的显示与隐藏

可以通过在评论数据对象中添加一个属性来控制评论框的显示与隐藏。首先，在评论数据对象中添加一个名为showReplyBox的属性，并将其初始值设置为false，表示评论框默认隐藏。然后，在v-for循环中，将评论数据对象的showReplyBox属性与评论框的显示与隐藏绑定起来。

以下是示例代码：

<template>
  <div>
    <div v-for="(comment, index) in comments" :key="index">
      <p>{{ comment.text }}</p>
      <button @click="toggleReplyBox(comment)">回复</button>
      <div v-if="comment.showReplyBox">
        <input type="text" v-model="comment.reply" />
        <button @click="submitReply(comment)">提交</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      comments: [
        { text: '评论1', showReplyBox: false, reply: '' },
        { text: '评论2', showReplyBox: false, reply: '' },
        { text: '评论3', showReplyBox: false, reply: '' },
      ],
    };
  },
  methods: {
    toggleReplyBox(comment) {
      comment.showReplyBox = !comment.showReplyBox;
    },
    submitReply(comment) {
      // 处理回复提交的逻辑
      console.log(comment.reply);
      comment.reply = '';
      comment.showReplyBox = false;
    },
  },
};
</script>

在上述示例中，comments数组为评论数据对象数组，其中每个评论对象都有一个showReplyBox属性，用于控制评论框的显示与隐藏。通过点击回复按钮，调用toggleReplyBox方法来切换showReplyBox属性的值。在评论框中，通过v-if指令根据showReplyBox属性的值决定是否显示评论框。点击提交按钮后，调用submitReply方法处理回复提交的逻辑，然后将showReplyBox属性设置为false，隐藏评论框