如果选择“全部”，则重置过滤器 Vue Js

Posted 2023-02-22

【中文标题】如果选择“全部”，则重置过滤器 Vue Js

【英文标题】：reseting filter if "All" is selected Vuejs

【发布时间】：2020-12-07 05:14:08

【问题描述】：

我有这个对象数组：

obj=
[name: 'joe', job: 'teacher', city: 'miami',
name: 'bill', job: 'police', city: 'yorkshire',
name: 'sarah', job: 'driver', city: 'michigan']

我有一个下拉菜单，其中包含如下选项：

<select v-model="selected">
  <option>blue</option>
  <option>green</option>
  <option>black</option>
  <option>all</option>
</select>

然后如果其中一个被选中，我会将它们与数组中的一个对象相关联：

if (selected === "blue") 
  optionSelected = 'joe'
 else if (selected === "green") 
  optionSelected = 'bill'
 else if (selected === "black") 
  optionSelected = 'sarah'
 else if (selected === "all") 
  // what should go here?

然后我像这样过滤它：

obj = obj.filter(object => object.name === optionSelected)

所以现在如果我选择blue 我的obj 变成name: 'bill', job: 'police', city: 'yorkshire' 等等，这很好。但是我不知道如何过滤all。因此，当它被选中时，obj 会重置为包含所有值，例如：

obj=
[name: 'joe', job: 'teacher', city: 'miami',
name: 'bill', job: 'police', city: 'yorkshire',
name: 'sarah', job: 'driver', city: 'michigan']

我该怎么做？

请注意： 代码的架构是这样设置的，我无法更改。

【参考方案1】：

我将从一个将颜色映射到名称的对象开始，这样您就可以避免所有 if..else if 的东西

const colorNameMap = 
  blue: 'joe',
  green: 'bill',
  black: 'sarah',
  all: false // totally optional since undefined is falsy

然后您只需检查所选颜色是否与地图中的某些内容匹配。如果没有，只需返回整个obj

const name = colorNameMap[this.selected]
const filtered = name ? obj.filter(o => o.name === name) : obj