CODEWITHSUNDEEP
javascriptvue.js
SJW525
SJW525

Reputation: 51

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

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>

Upvotes: 3

Views: 9877

Answers (2)

protestator
protestator

Reputation: 371

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

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

Upvotes: 2

Abdelillah Aissani
Abdelillah Aissani

Reputation: 3108

You can use Object.entries property : 

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

Upvotes: 4

Related Questions