是否可以从 v-for 循环外部访问 v-for 中变量的值？
因此，我有一个 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]：渲染时出错：“TypeError：无法读取未定义的属性‘length’”）
关于如何避免抛出这些错误并尽可能以 vue-native 方式完成我需要的工作，有什么想法吗？
根据要求，这是声明
filterItems
的代码。它只是一个声明为数组的 prop：
props: {
filterItems: Array,
behavior: String,
},
它作为数组从父组件传入。
更新：可能的解决方案？
所以我不知道这是否是最好的方法，但我能够通过执行以下操作获得所需的结果。我很乐意听取反馈，看看这是否是一个令人满意的解决方案：
我添加了一个数据值：
data() {
return {
displaySearch: false,
};
},
然后添加：
updated() {
if (this.behavior !== 'selected' && this.filterItems.length >= 5) {
this.displaySearch = true;
}
},
然后对新的布尔值进行检查：
v-if="displaySearch"
我的想法是，在页面呈现后对
displaySearch
进行检查，这样可以避免 TypeError。我最初尝试安装它，但它立即坏了。
最终解决方案 请参阅下面 Stephen Thomas 的回答。我选择了这个，因为在我看来，这是最简单、最优雅的答案。
presumably because I'm accessing "filterItems" outside of the loop itself.
不。
v-for
循环未定义
filterItems
。它在组件的
props
对象中定义（或应该定义）。因此，它完全可以在模板中的任何位置访问。
TypeError: Cannot read property 'length' of undefined"
这表示
filterItems
未定义。包含此组件的父级未提供值。您可以为该属性定义一个默认（空）数组：
props: {
filterItems: {
type: Array,
default() {
return [];
}
},
behavior: String
}
或者您可以修复父级
我认为它以空数组的形式启动 filterItems 已经解决了，例如：
date () {
return {
filterItems: []
}
}
Vue 不允许在 v-for 之外访问已声明的属性（以避免属性之间发生冲突）
您可以声明一个全局布尔变量来显示或隐藏组件吗？或者将属性注入到您的对象中以隐藏或显示