I have an initial empty object in Vuex state that gets updated from an API.

const state = {
  someObject: {}
}

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

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

What is best practice for checking if a state object is set/empty or not?

Should i set someObject: null/undefined/false initially, even if it expects to be updated with a new object?

Does it make sense to do a check in getters?

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

I have an initial empty object in Vuex state that gets updated from an API.

const state = {
  someObject: {}
}

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

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

What is best practice for checking if a state object is set/empty or not?

Should i set someObject: null/undefined/false initially, even if it expects to be updated with a new object?

Does it make sense to do a check in getters?

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

• javascript
• vue.js
• vuex

2 Answers 2

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

Or if you wanted to do a getter:

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

Depending on particular use case I would ether set it to null/undefined or make if check by some required object property like v-if='someObject.id'

Anything else seams as unnecessary complication.