Check if json array is empty at store vuex

Question

I want to show a button if my array of object has some data, so basilcy in my store(vuex) i defined a array like this:

state: {
    document: []
},

i append data to this array from other components and i already checked that the data is appending right, no problem here.

So i want to show the button just if there is some data:

<div class="row margin-above">
    <div class="panel panel-primary" v-for="section in this.$store.getters.getDocument">
        <div class="panel-body quote" >
            <p>{{section.key}}</p>
        </div>
    </div>
    <div v-if="this.$store.getters.getDocument != '[]'">
        <button class="btn btn-success btn-block">Create Document</button>
    </div>
</div>

there is the button, i want to hide the whole div with the button if the condition matches, but it is not working the button is always there, any help?

why you use single quotations in `this.$store.getters.getDocument != '[]'`? Isn't `document` an array? — choasia, Aug 02 '17 at 11:24
@FilipeCosta Yeah, if your `document` is an array, you shouldn't use "!=", see: https://stackoverflow.com/questions/40313263/why-is-in-javascript — choasia, Aug 02 '17 at 11:37

Harrie Kiezebrink · Accepted Answer · 2020-05-13T14:35:58.307

3

Check its length property.

<div v-if="this.$store.getters.getDocument.length != 0">
    <button class="btn btn-success btn-block">Create Document</button>
</div>

Or assign the vuex variable to null when there are no elements. Than this should work.

<div v-if="this.$store.getters.getDocument">
    <button class="btn btn-success btn-block">Create Document</button>
</div>

edited May 13 '20 at 14:35

answered Aug 02 '17 at 11:29

Harrie Kiezebrink

113
10

worked, dunno i had tried something like that, thank you friend :D – Filipe Costa Aug 02 '17 at 11:33

score 1 · Answer 2 · answered Aug 02 '17 at 11:34

In your store did u define the getter "getDocument", if so add a computed property in your component, it much cleaner and more reusable then referencing the store getters in the template directly:

computed : {
   document: function() { 
       return this.$store.getters.getDocument; 
   }
}

in the template:

<div v-if="document.length">
    <button class="btn btn-success btn-block">Create Document</button>
</div>

Check if json array is empty at store vuex

2 Answers2