如果在其他地方回答了这个问题，我们深表歉意。一直在这里谷歌搜索和搜索，但没有任何运气。我能找到的最接近的答案是 here但这需要对我现有的设置进行大量修改。
我正在尝试根据用户的多个输入来过滤数组。我的演示假设有两个输入，但实际应用程序应该大约有五个。 JSFiddle
HTML
<div id="app">
<h2>Continent</h2>
<div v-for="filter in filters.continent">
<input type="checkbox" :value="filter" v-model="search.continent"> {{filter}}
</div>
<h2>Budget</h2>
<div v-for="filter in filters.budget">
<input type="checkbox" :value="filter" v-model="search.budget"> {{filter}}
</div><br/>
<p>You would like to live in {{search.continent}} and your budget is {{search.budget}}</p>
<div v-for="country in filteredCountries">
{{country.name}}
</div>
</div>
JS
new Vue({
el: "#app",
data() {
return {
search: {
continent: [],
budget: []
},
filters: {
continent: ['Europe', 'Asia', 'North America'],
budget: ['Low', 'Medium', 'High'],
},
countries: [
{
name: "Sweden",
continent: "Europe",
budget: ["Medium", "High"],
},
{
name: "Hong Kong",
continent: "Asia",
budget: ["Medium", "Low"],
},
{
name: "Thailand",
continent: "Asia",
budget: ["Low"],
},
{
name: "Canada",
continent: "North America",
budget: ["Medium", "High"],
},
{
name: "US",
continent: "North America",
budget: ["Medium", "Low"],
}
]
}
},
computed: {
filteredCountries: function(){
return this.countries.filter((country) =>
this.search.budget.some(el => country.budget.includes(el)),
)
},
}
})
在我的实际应用程序中，我使用不同的组件来获取结果，并通过事件总线进行过滤，该事件总线发送带有搜索数据的有效负载，该负载将输入到过滤后的计算属性中。
我希望有人能够用一种方法为我指明正确的方向，希望在添加额外的(基于类似数组的)过滤器选项时不需要更多的复杂性。
仍在尝试掌握 Javascript，因此对新问题表示歉意!
编辑:Baboo_的答案非常接近我想要的，但既然我尝试了他的 fiddle ，我似乎可能忽略了两件事。首先，过滤器应该能够接受一系列选项。我已经更新了我的 fiddle 来展示这一点。
预期的效果是过滤器像侧边栏过滤器一样不断更新结果。这纯粹是可选的。我知道我的 Fiddle 并不这么认为，因为一切从一开始就隐藏起来，但我的目的是包含一个隐藏的过滤器，将所有内容都 checkin 。所有其他输入只是简单地实时优化结果。
最佳答案
您可以按预算和洲连续过滤国家/地区，如下所示:
computed: {
filteredCountries: function(){
return this.countries
.filter(country => this.search.budget.includes(country.budget))
.filter(country => this.search.continent.includes(country.continent));
},
}
这是fiddle .
关于javascript - 在 Vue 中显示具有多个选项的过滤数组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55206340/