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

Posted 2023-02-23

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

【英文标题】：Is it possible to access a value of a variable in a v-for from outside the v-for loop?

【发布时间】：2018-11-18 20:56:38

【问题描述】：

所以我有一个 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。我最初尝试安装它，但它立即坏了。

---

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

【问题讨论】：

不清楚您要访问什么或在哪里。当 filterItems 未定义时，您将得到的错误将被抛出，但您并没有尝试在 for 循环中访问它。

【参考方案1】：

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

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

TypeError：无法读取未定义的属性“长度”

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

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

或者你可以修复父级

【讨论】：

你说得对。我试了一下，它起作用了，但现在我有了一个新的谜团，这就是为什么父级完全返回未定义值的原因。感谢您的洞察力！

【参考方案2】：

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

date () 
     return 
         filterItems: []
     

【参考方案3】：

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

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