Clever Geek Handbook

How to check if a Vuex state object is empty

I have an original empty object in Vuex state that is updated from the API.

const state = {
  someObject: {}
}

How do I check if an object is empty in my template?

<template>
  <div v-if="someObject">
    This should not display when someObject is empty.
  </div>
</template>

What's the best way to check if the state object is set / empty or not?

Should I install someObject: null/undefined/false

initially, even if it is pending update with a new object?

Does it make sense to check in getters?

export const someObject = state => Object.getOwnPropertyNames(state.someObject).length == 0 ? state.someObject : false
+3


source to share


2 answers


You can use lodash method: _.isEmpty({someObject});

Or if you want to do a getter:



computed:{
  objectLength(state){
    return Object.keys(state.someObject).length
  }
+1


source


Depending on the specific use case, I would set it to null / undefined, or make if checking any property of the required object, like v-if = 'someObject.id'



Something else stitches as an unnecessary complication.

+1


source






More articles:


All Articles