Show an element if date is before or after another date using Vue js

I’m using vue to dynamically show elements (called boxes) on the page, but I need to display an element based on if it’s start date is before or after today+1 week.

So if the box.start_date is before one week from today, then show it, else hide it.

I’m not sure how I can do this in vue

ie.

<div class="box" v-if="box.start_date < *** 1 week from now date here?? ***"> ...  </div>

I tried using moment.js but it give me an error saying moment is not defined in vue

With laravel and blade I would just do this like this…

@if($box->start_date > now()->addWeek(1))

How can I make this work with vue?

Answer

Try to use a computed property to return that value :

computed:{
   beforeWeek(){
   return (new Date().getTime())-(new Date(this.box.start_date).getTime())> (7*24*60*60*1000)
   }
}

template :

<div class="box" v-if="beforeWeek"> ...  </div>

or you could a method :

methods:{
beforeWeek(start_date){
   return (new Date().getTime())-(new Date(start_date).getTime())> (7*24*60*60*1000)
   }
}

template :

<div class="box" v-if="beforeWeek(box.start_date)"> .... </div>

**Note : **

72460601000 is the number of milliseconds in one week