修复无限循环。 Vue.js

Question

我正在尝试检查用户发表的每条评论和评论回复，并检查他们是否在 30 分钟前发表评论然后他们无法编辑它，但是我这样做的方式不起作用我收到了这个错误

[Vue 警告]：组件渲染函数中可能存在无限更新循环。

这是有问题的代码

<div v-for="comment in forum.comments">
    <el-card shadow="never">

    //check for other things 
    //set the comment info and layout

        <div style="text-align: end" v-if="comment.user_id === $page.auth.user.auth.user.id">
            {{minutes(comment)}}
            <div v-if="editRemove === false" class="btn-link-edit action-button"
                @click="edit(comment)">
                <i class="fas fa-pencil-alt"></i>
            </div>
        </div>

        <div v-for="reply in comment.replies">

        //check for other things 
        //set the reply info and layout

            <div style="text-align: end" v-if="reply.user_id === $page.auth.user.auth.user.id">
                {{minutes(reply)}}
                <div v-if="editRemove === false" class="btn-link-edit action-button"
                    @click="edit(reply)">
                    <i class="fas fa-pencil-alt"></i>
                </div>
            </div>
        </div>
    </el-card>
</div>

数据返回

editRemove: false,

方法

minutes(item) {
    var minutes = moment().diff(moment(item.comment_time), 'minutes');
    if (minutes >= 30) {
        this.editRemove = true;
    } else if (minutes <= 29) {
        this.editRemove = false;
    }
}

我应该怎么做才能解决这个问题？

Answer 1

正如我在评论中提到的，您不断地更改同一个变量this.editRemove，因此正在发生更改检测并因此导致类似于无限循环的情况。如前所述，我将为 cmets 和回复制作子组件。虽然我说你可以使用计算属性，但在第二次考虑它时它不会起作用；）因为它不是反应性的。因此，我会在子组件中使用一个时间间隔，每分钟检查一次自发布评论/回复以来经过的分钟数。

所以我会创建一个孩子，比如说Comment，将 v-for 中的当前 comment 传递给孩子：

<div v-for="comment in forum.comments">
  <Comment :comment="comment"/>
</div>

然后孩子会有按钮并检查时间以及是否显示编辑按钮：

<button v-if="isEdit" @click="editComment">Edit</button>

isEdit 在组件创建时确定，之后每 60 秒确定一次。销毁组件时，记得清除间隔。

孩子：

props: {
  comment: Object
},
data() {
  return {
    isEdit: Boolean,
    interval: null
  };
},
methods: {
  editComment() {
    console.log(this.comment)
    // do your magic
  },
  checkTime() {
    var minutes = moment().diff(moment(this.comment.comment_time), "minutes");
    if (minutes >= 30) {
      this.isEdit = true;
      // here you could also already clear the interval, since it won't change
    } else if (minutes <= 29) {
      this.isEdit = false;
    }
  }
},
created() {
  this.checkTime();
  this.interval = setInterval(() => {
    this.checkTime();
  }, 60000);
},
beforeDestroy() {
  clearInterval(this.interval);
}

此演示仅适用于 cmets，但同样适用于回复。

CODESANDBOX，为了演示，我对时间间隔做了一些更改，将分钟更改为秒。所以 10 秒后应该会出现另外 2 个按钮。