[Vuejs]-Remove button after 30 minutes. Laravel

by

1👍

✅

The simplest way to do that is:

Here in template:

<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 script:

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

You can show the result here:
your code in jsfiddle

👤Ghyath Darwish

0👍

First, start by putting v-if="canEdit" on your <div>. Then in your script section of the Vue component we’re going to create a canEdit boolean, then a loop to update it on a regular basis. This assumes you have a specific Comment.vue component and this.comment is being passed to the component already, maybe as a prop or something, and that it contains the typical Laravel Model fields, specifically 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);
},
👤Caleb Anthony

Leave a comment