时间戳

首页 > 解决方案 > 是否可以从 v-for 循环外部访问 v-for 中变量的值？

javascript - 是否可以从 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 警告]：渲染错误：“TypeError：无法读取未定义的属性‘长度’”）

关于如何避免抛出这些错误并以尽可能原生的方式完成我需要的任何想法？

根据要求，这是声明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 的答案。我决定这样做，因为在我看来这是最简单和最优雅的答案。

标签： javascriptloopsvue.jsv-for

解决方案

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

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

推荐阅读