[Vuejs]-Vue js – display an element from a list based on the current time

by

0👍

startTime, estimatedTime, begin, destination

You can have a getter in your store:

getters: {
  ...,
  tripsOnTime: state => {
    const currentTime = new Date(); // Format the time based on your requirements
    // return only the trips that meet the condition
    // Validation to check if trip is not undefined/null
    return state.trips.filter(trip => trip && trip.startTime + trip.estimatedTime < currentTime
  },
  ...
}

Now you can add it:

<script>
  watch: {
    passengerTrips: function () {
      this.updateScroll();
    },
  computed: {
    ...mapGetters({
    passengerTrips: 'myTrips/passengerTrips',
    tripsOnTime: 'myTrips/tripsOnTime',    
  }),
</script>

I added trip to the validation:

return state.trips.filter(trip => trip && trip.startTime + trip.estimatedTime < currentTime

If you want to check each property, then you can do it with the && operator, with hasOwnProperty method for objects.

Leave a comment