计算中的 Vue forEach

Posted 2023-02-23

【中文标题】计算中的 Vue forEach

【英文标题】：Vue forEach in computed

【发布时间】：2021-03-24 11:32:18

【问题描述】：

我正在构建一个复选框过滤器，它将单击的复选框值存储在一个数组中。之后，计算的数据应该更新，但我总是不确定。

数据结构： 赌场 品牌标签 Brand_Tag_Name

计算：

computed: 
    filteredCasinos: function() 
      return this.casinos.forEach(casino => 
        return casino.brand_tags.filter(brandTag => 
          return this.filteredCategories.includes(brandTag.Brand_Tag_Name)
        )
      )
    
,

html（但我猜这很好用）

        <label for="Featured">Featured Casinos
          <input type="checkbox" v-model="filteredCategories" value="Featured">
        </label>
        <label for="Featured">Big Brands
          <input type="checkbox" v-model="filteredCategories" value="Big Brand">
        </label>
        <label for="Featured">New Casinos
          <input type="checkbox" v-model="filteredCategories" value="New Casino">
        </label>
        <label for="Featured">Pay n Play
          <input type="checkbox" v-model="filteredCategories" value="Pay N Play">
        </label>
        <label for="Featured">Trusted Casinos
          <input type="checkbox" v-model="filteredCategories" value="Trusted Casino">
        </label>

【参考方案1】：

这是因为return this.casinos.forEach 返回未定义。

 filteredCasinos: function() 
return this.casinos.filter(casino => 
 return !!casino.brand_tags.find(brandTag => 
    return this.filteredCategories.includes(brandTag.Brand_Tag_Name)
    )
  )

【讨论】：

但是当我不返回 forEach 时它也返回未定义。或者有没有更好的方法来遍历赌场的brand_tags？

如果您使用计算值，则需要返回值。如果要返回数组，可以使用 map 函数。 filteredCasinos: function() return this.casinos.map(casino => return casino.brand_tags.filter(brandTag => return this.filteredCategories.includes(brandTag.Brand_Tag_Name) ) )

这只会返回所有赌场，并且不会被过滤

我编辑了这篇文章。我希望它能解决你的问题:)