如何在.vue文件中使用v-if检查vue对象是否为空

Question

我在Vue中使用v-for循环遍历媒体对象来查看是否存在存储的图像。这部分代码可以正常工作，但是如果对象为空，则需要在下面显示一个div，上面写着“没有媒体”。但实际上，“没有媒体”这段文字总是会被显示出来。如有帮助，请多多指教。

以下是我的代码：
```html

There is no media

```

<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>

- SJW525

---

测试特定属性而不是对象，例如 v-if="current_sample.media.path !== ''"。 - DedaDev

@Deda我已经完成了，现在控制台显示错误：“无法读取未定义的属性'path'”。 - SJW525

Answer 1

您可以使用 Object.entries 属性：

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

- Abdelillah Aissani

---

该解决方案仅适用于支持ECMA 7+的浏览器。 看看我的解决方案，它适用于所有浏览器。 - protestator

@protestator 这不起作用，它说“无法将未定义或空对象转换为对象”<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/&#39; + media.path" class="rotateImg PreviewImage" /> </v-flex> <v-flex sm3 v-if="!Object.entries(current_sample.media).length">没有媒体</v-flex> - SJW525

Answer 2

您可以使用与所有浏览器兼容的Object.keys。

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

- protestator

---

现在显示“无法将未定义或空值转换为对象”<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="'https://orderinformation.s3.amazonaws.com/&#39; + media.path" class="rotateImg" style="float:left;" /> </v-flex> <v-flex sm3 v-if="Object.keys(current_sample.media).length">没有媒体</v-flex> </p> - SJW525

尝试这个：v-if="current_sample.media && Object.keys(current_sample.media).length" - protestator