时间戳

首页 > 解决方案 > Vue.js - 在 v-for 中过滤，如果 Array 实际上为空，如何处理

vue.js - Vue.js - 在 v-for 中过滤，如果 Array 实际上为空，如何处理

问题描述

希望这个副本对 Vue.js 世界来说不是太陌生。

我有一个配置文件列表。在这些配置文件实例中，有一个表示他们的社交媒体帐户的数组。然而，由于遗留数据库的原因，假设对于一些艺术家来说，社交媒体帐户作为null.

所以，想象一下我有类似的东西：

<a
   v-if="artwork.artist.socialMedia"
   v-for="(social, index) in artwork.artist.socialMedia.filter(social => social.url.length > 0)"
   v-bind:key="index"
   v-bind:href="parseSocialMediaURL(social.url, social.platform)"
>

</a>

但是，前面的 v-if 语句似乎并没有跳过这些值 for artwork.artist.socialMediawhen this is null。对于大多数人来说，这个值只是一个普通的 old Array，那么我该如何处理这两种情况呢？

标签： vue.js

解决方案

您v-if应该可以工作，但如果您的情况比简单的情况更复杂，if您可以考虑为此使用计算方法。它也可以处理其中filter的内容。您也可以使用isArray更好的检查。

computed: {
  artistSocialMedia () {
    if( !Array.isArray(this.artwork.artist.socialMedia) ) {
     return []
    }

    return this.artwork.artist.socialMedia.filter(social => social.url.length > 0)
  }
}

然后使用计算方法

<a
   v-for="(social, index) in artistSocialMedia"
   v-bind:key="index"
   v-bind:href="parseSocialMediaURL(social.url, social.platform)"
>

</a>

推荐阅读