Skip to content
Advertisement

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?

Advertisement

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

Advertisement