How to check if a vue object is empty in .vue using v-if

Question

I have a for-loop running in vue using v-for that loops through a media object to see if there are images stored. That works correctly, but now I want a div displayed below it saying "There is no media" if the object is empty. The text "There is no media" always displays though. Any help on this would be greatly appreciated.

Below is my code:

<v-flex>
                            <p><v-flex sm3 v-for="media in current_sample.media"  :key="media.id">
                                <v-btn @click="delete_image(media.id)">[X]</v-btn> <img :src="'https://orderinformation.s3.amazonaws.com/' + media.path" class="rotateImg" />
                            </v-flex>
                                <v-flex sm3 v-if="current_sample.media">There is no media</v-flex>
                            </p>
                        </v-flex>

Test specific property instead of object, like v-if="current_sample.media.path !== '' " — DedaDev
– DedaDev, Commented Oct 2, 2019 at 15:21
@Deda I did it now says this error: "Cannot read property 'path' of undefined" in console — SJW525
– SJW525, Commented Oct 2, 2019 at 15:31

Abdelillah Aissani · Accepted Answer · 2019-10-02 15:23:16Z

4

You can use Object.entries property :

 <v-flex sm3 v-if="!Object.entries(current_sample.media).length">There is no media</v-flex>

answered Oct 2, 2019 at 15:23

Abdelillah Aissani

3,1082 gold badges12 silver badges25 bronze badges

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

2 Comments

protestator Over a year ago

That solution only works in browsers which supports ECMA 7+ See my solution which works in all browsers

SJW525 Over a year ago

@protestator That doesnt work it says "Cannot convert undefined or null to object" now <v-flex sm3 v-for="media in current_sample.media" :key="media.id"> <v-btn @click="delete_image(media.id)">[X] </v-btn> <img :src="'orderinformation.s3.amazonaws.com' + media.path" class="rotateImg PreviewImage" /> </v-flex> <v-flex sm3 v-if="!Object.entries(current_sample.media).length">There is no media</v-flex>

protestator · Accepted Answer · 2019-10-02 15:24:00Z

2

You can use Object.keys which is compatible with all browsers

v-if="Object.keys(obj).length"

answered Oct 2, 2019 at 15:24

protestator

3711 silver badge15 bronze badges

2 Comments

SJW525 Over a year ago

It now says "Cannot convert undefined or null to object" <p> <v-flex sm3 v-for="media in current_sample.media" :key="media.id" style="float:left;"> <v-btn @click="delete_image(media.id)">[X] </v-btn> <img :src="'orderinformation.s3.amazonaws.com' + media.path" class="rotateImg" style="float:left;" /> </v-flex> <v-flex sm3 v-if="Object.keys(current_sample.media).length">There is no media</v-flex> </p>

protestator Over a year ago

Try this: v-if="current_sample.media && Object.keys(current_sample.media).length"

Collectives™ on Stack Overflow

How to check if a vue object is empty in .vue using v-if

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related