所以我有一个Vue页面,我在其中循环了几个项目,并且我有以下代码:
<div v-if="behavior !== 'selected' && filterItems.length >= 5"></div> <div v-for="(itemName, index) in filterItems" :key="index">[stuff]</div>
基本上,我遍历API中的一些项,但如果有5个或更多项,我也想有条件地显示一个元素,否则我希望它被隐藏。该元素需要存在于循环之外,但它需要检查循环中有多少项。
有趣的是,上面的代码可以工作,但它也会抛出控制台错误,大概是因为我在循环之外访问"filterItems“。
(这是控制台错误: Vue warn: Error in render:"TypeError: Cannot read property 'length‘of undefined")
关于如何避免抛出这些错误并尽可能以vue原生方式完成我需要的东西,您有什么想法吗?
按照要求,下面是声明 filterItems 的代码。它只是一个声明为数组的道具:
filterItems
props: { filterItems: Array, behavior: String, },
它是作为数组从父组件传入的。
更新:一种可能的解决方案?
因此,我不知道这是不是最好的方法,但我能够通过执行以下操作获得预期的结果。如果这是一个令人满意的解决方案,我很乐意听到反馈:
我添加了一个数据值:
data() { return { displaySearch: false, },
然后添加了:
updated() { if (this.behavior !== 'selected' && this.filterItems.length >= 5) { this.displaySearch = true;