首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >是否可以从v-for循环外部访问v-for中的变量值?

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

Stack Overflow用户
提问于 2018-06-09 02:43:28
回答 2查看 1.6K关注 0票数 1

所以我有一个Vue页面,我在其中循环了几个项目,并且我有以下代码:

代码语言:javascript
复制
<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原生方式完成我需要的东西,您有什么想法吗?

按照要求,下面是声明filterItems的代码。它只是一个声明为数组的道具:

代码语言:javascript
复制
props: {
    filterItems: Array,
    behavior: String,
  },

它是作为数组从父组件传入的。

更新:一种可能的解决方案?

因此,我不知道这是不是最好的方法,但我能够通过执行以下操作获得预期的结果。如果这是一个令人满意的解决方案,我很乐意听到反馈:

我添加了一个数据值:

代码语言:javascript
复制
data() {
    return {
      displaySearch: false,
    };
  },

然后添加了:

代码语言:javascript
复制
updated() {
    if (this.behavior !== 'selected' && this.filterItems.length >= 5) {
      this.displaySearch = true;
    }
  },

然后对新的布尔值运行检查:v-if="displaySearch"

我的想法是,在页面呈现之后对displaySearch运行检查,这样就避免了TypeError。我试着安装它,但它立刻就坏了。

Final Solution参见下面来自斯蒂芬·托马斯的答案。我选择了这个,因为在我看来,这是最简单、最优雅的答案。

EN

回答 2

Stack Overflow用户

发布于 2018-06-09 02:49:22

我认为它会在空数组已经解决的情况下启动filterItems,例如:

代码语言:javascript
复制
date () {
     return {
         filterItems: []
     }
}
票数 2
EN

Stack Overflow用户

发布于 2018-06-09 02:47:42

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

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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50766704

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档