Vue.js-在v-for中过滤，如何处理数组是否实际为空

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

我有一个个人资料列表。在这些概要文件实例中，有一个表示其socialMedia帐户的数组。但是，由于遗留数据库的原因，假设对于一些艺术家来说，socialMedia帐户以

null

的形式进入Vue.js应用程序

那么，想象一下我有这样的东西：

<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语句似乎没有跳过

artwork.Artister.socialMedia

的那些值，当该值为

null

时。对于大多数情况，此值只是一个普通的旧数组，因此如何处理这两种情况？

作为vue文档的一部分，您不应该同时使用它们

要有条件地呈现而不添加附加元素，请将其包装在模板中

<template v-if="artwork.artist.socialMedia">
    <a
        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>
</template>

 > p>您的代码> V-IF /代码>应该工作，但是如果您的条件比简单的<代码>更复杂，如果您可以考虑使用计算方法。它还可以处理其中的
过滤器。您还可以使用
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>


您好，非常感谢您的回答，但我认为您跳过了
artwork.Artister.socialMedia
为
null
的用例（您不能过滤
null
值，只能过滤
数组
）…请重新阅读问题。顶部的v-if应该处理这种情况。