2017-11-11 104 views
-1

我不确定这是一个问题还是我做错了什么。使用VueJS,我有一个v-for内的过滤功能,并且工作正常,但它在控制台中引发了一个警告,this是这个问题的一个最简单的例子。你可以看到,我需要过滤来自不同数组的关系数据,因此函数getClan()返回一个数组,所以我需要使用第一个元素的数据。到目前为止好,但是当V-for循环结束我得到了这样的警告:在for循环中过滤数组引发警告VueJS

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

显示Chrome和Firefox的控制台上的消息,由于某种原因没有codepen的本地控制台上显示,我猜这在某种程度上与警告分离。

该警告仅在for循环结束时发生,并且在尝试使用大量数据时会发生同样的情况。

考虑使用计算属性,但不能在这些参数上传递参数。

+0

以供将来参考,请提问自成体系,而不是取决于外部服务,如codepen或的jsfiddle(SO的片段工具做的一切他们这样做,它确保问题不会因为链接腐烂而变得不可用) –

+0

好的,感谢您的建议,我想这是懒惰的,但您是对的,代码不长,并且会提高问题的可读性。 – deadPoet

回答

1

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

你需要进行检查,看是否有结果,而不是:

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

谢谢,这个很明显。只需要做一点改动,因为即使过滤器只有一个项目将条件改为clan.length> 0并且可以工作,过滤器也会返回一个数组。 – deadPoet

+0

@deadPoet哦,很好;我删除了答案的错误部分,谢谢! –

+0

没问题,我认为问题是v-for指令中的过滤器调用,当它到达最后一个元素时,getClan(x)仍然得到一个空参数,这就是警告的原因,所以这应该解决问题, 再次感谢。 – deadPoet