在for循环内过滤数组会引发警告VueJS

Question

我不确定这是一个问题还是我做错了什么。使用VueJS，我在v-for中有一个过滤功能并且工作正常，但它在控制台中发出警告，this是问题的最小例子。

正如您所看到的，我需要过滤来自不同数组的关系数据，因此函数getClan（）会返回一个数组，因此我需要使用第一个元素中的数据。到目前为止一切都那么好，但是当v-for循环结束时，我得到了这个警告：

[Vue warn]: Error in render function: "TypeError: this.clans.filter(...)[0] is undefined"    

该消息显示在Chrome和Firefox控制台上，由于某种原因未显示在codepen的本地控制台上，我猜这是以某种方式与警告隔离。

警告仅在for循环结束时发生，当尝试使用更大的数据集时，会发生相同的警告。

考虑使用计算属性，但不能传递参数。

Answer 1

当您的数组过滤器不匹配任何内容时会出现问题：您尝试访问返回值的第一个索引，该索引不存在。

您需要检查是否有结果：

getClan(x) {
    var clan = this.clans.filter(clan=>clan.id==x)
    if (clan.length > 0) {
      return clan[0].name
    } else {
      return "Peasant"
    }
}