是否可以从 v-for 循环外部访问 v-for 中的变量值？

Question

所以我有一个 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-native 方式完成我需要的东西有什么想法吗？

根据要求，这里是声明 filterItems 的代码。它只是一个声明为数组的道具：

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。我尝试安装它，最初它立即坏了。

最终解决方案 请参阅下面斯蒂芬托马斯的回答。我选择了这个，因为在我看来这是最简单和最优雅的答案。

Answer 1

Vue 不允许在 v-for 之外访问声明的属性（以避免属性之间的冲突）

您可以声明一个全局布尔变量来显示或隐藏组件吗？或将属性注入您的对象以隐藏或显示

Answer 2

我认为它启动 filterItems 作为空数组已经解决了，例如：

date () {
     return {
         filterItems: []
     }
}

Answer 3

presumably because I'm accessing "filterItems" outside of the loop itself.

没有。 filterItems 不是由 v-for 循环定义的。它在组件的 props 对象中定义（或应该定义）。因此，它可以在您的模板中的任何位置完全访问。

TypeError: Cannot read property 'length' of undefined"

表示 filterItems 未定义。包含此组件的父级未提供值。您可以为属性:

定义默认（空）数组

props: {
    filterItems: {
        type: Array,
        default() {
            return [];
        }
    },
    behavior: String
}

或者您可以修复父级

Is it possible to access a value of a variable in a v-for from outside the v-for loop?