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?

Answer 1

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>