是否可以从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个或更多这些项目，否则我希望隐藏它。该元素需要存在于循环外部，但需要检查循环中有多少项。

有趣的是，上面的代码有效，但它也会引发控制台错误，大概是因为我正在访问＆＃34; filterItems＆＃34;循环本身之外。

（这里是控制台错误：[Vue警告]：渲染错误：＆＃34; TypeError：无法读取属性＆＃39;未定义的长度＆＃34;）

关于如何避免抛出这些错误并尽可能以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。我尝试安装它，并立即打破它。

最终解决方案 请参阅Stephen Thomas的答案。我认为这是最简单和最优雅的答案。

Answer 1

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

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

Answer 2

  

大概是因为我在循环本身之外访问“filterItems”。

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

  

TypeError：无法读取未定义“

的属性'length'

这表明filterItems未定义。包含此组件的父级未提供值。您可以为属性定义默认（空）数组：

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

或者您可以修复父

Answer 3

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

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