Удалить кнопку через 30 минут. Laravel

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()
    }
  }
})

Вы можете показать результат здесь : ваш код в jsfiddle

Answer 2

Сначала начните с v-if="canEdit" на вашем <div>. Затем в разделе сценариев компонента Vue мы создадим логическое значение canEdit, а затем al oop для его регулярного обновления. Предполагается, что у вас есть определенный c 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);
},