CODEWITHSUNDEEP
javascriptvue.jsvuex
Andreas
Andreas

Reputation: 1099

How to check if Vuex state object is empty

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

Upvotes: 9

Views: 13790

Answers (2)

snovakovic
snovakovic

Reputation: 314

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.

Upvotes: 7

aprouja1
aprouja1

Reputation: 1810

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
  }

Upvotes: 11

Related Questions