Question

我正在建立一个论坛，我希望删除用户30分钟后编辑其评论的能力。

这是vue.js中我按钮的代码，它不是“真实”按钮，而是可点击的图标

<div class="btn-link-edit action-button"
    @click="edit(comment)">
    <i class="fas fa-pencil-alt"></i>
</div>

vue.js中的方法

edit(model) {
    this.mode = 'Editar';
    this.form = _.cloneDeep(model);
    this.dialogFormVisible = true;
},

添加此计时器的最佳方法是什么，该计时器应在用户发表评论时立即启动，为此，在该表中我有一个名为comment_time的字段，其中包含该信息。

我该怎么做？

Answer 1

最简单的方法是：

在模板中：

<div id="app">
    <div v-for="comment in comments">
      <p>
      {{comment.text}}
      </p>
      <button v-if="commentTime(comment.comment_time)">Edit </button>
    </div>

    </div>

Vue脚本：

    new Vue({
  el: "#app",
  data: {
    comments: [
      { text: "Nancy comment", comment_time: 1579206552201}
    ]
  },
  computed: {
    now () {
      return new Date()
    }
  },
  methods: {
    commentTime(cTime){
         let t = new Date(cTime)
         t.setMinutes(t.getMinutes() + 30)
       return this.now.getTime() < t.getTime()
    }
  }
})

您可以在此处显示结果： your code in jsfiddle

Answer 2

首先，将v-if="canEdit"放在您的<div>上。然后，在Vue组件的脚本部分中，我们将创建一个canEdit布尔值，然后创建一个循环以定期对其进行更新。假设您有一个特定的Comment.vue组件，并且已经将this.comment传递给了该组件（可能是作为道具或其他东西），并且它包含典型的Laravel模型字段，尤其是created_at。

data() {
  return {
    canEdit: true, // Defaults to `true`
    checkTimer: null, // Set the value in `data` to help prevent a memory leak
    createdAt: new Date(this.comment.created_at),
  };
},
// When we first make the component, we set `this.createdPlus30`, then create the timer that checks it on a regular interval.
created() {
  this.checkTimer = setInterval(() => {
    this.canEdit = new Date() > new Date(this.created_at.getTime() + 30*60000);
  }, 10000); // Checks every 10 seconds. Change to whatever you want
},
// This is a good practice whenever you create an interval timer, otherwise it can create a memory leak.
beforeDestroy() {
  clearInterval(this.checkTimer);
},

30分钟后删除按钮。拉拉韦尔

2 个答案: