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
– choasia, Commented Aug 2, 2017 at 11:24
@FilipeCosta Yeah, if your document is an array, you shouldn't use "!=", see: stackoverflow.com/questions/40313263/why-is-in-javascript — choasia
– choasia, Commented Aug 2, 2017 at 11:37

Harrie Kiezebrink · Accepted Answer · 2020-05-13 14:35:58Z

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, 2020 at 14:35

answered Aug 2, 2017 at 11:29

Harrie Kiezebrink

11310 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Filipe Costa Over a year ago

worked, dunno i had tried something like that, thank you friend :D

Tarik Chakur · Accepted Answer · 2017-08-02 11:34:51Z

1

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>

answered Aug 2, 2017 at 11:34

Tarik Chakur

1,73714 silver badges9 bronze badges

Collectives™ on Stack Overflow

Check if json array is empty at store vuex

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related