Search code examples
javascriptobjectvue.jstruthiness

VueJS - How to check the truthiness of an object of objects for a v-if

I have this appointments object that has three keyed arrays. I'm trying to find a clean JS way to check the truthiness for a v-if when all three block arrays are empty a la: 

{ 
    "block_1": [], 
    "block_2": [], 
    "block_3": [] 
}

I have been trying to use Object.values(). For example, this code will return true if all the arrays are truthy and false if even one of them is empty:

Object.values(appointments).every(item => item.length)
Solution

  • Make a computed property:

    hasAppointment() {
  return !!Object.values(this.appointments).find(i => i.length);
}

    And then use that computed in your v-if statement:

    <div v-if="hasAppointment"></div>