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

问题描述

我有这个对象数组：

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',city: 'yorkshire'}，依此类推，这很好。但是我不知道如何过滤all。因此，选择obj时将重置为包含所有值，例如：

obj=
[{name: 'joe',city: 'michigan'}]

我该怎么做？

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

解决方法

我将从将颜色映射到名称的对象开始，这样您就可以避免使用所有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