Question

很抱歉，如果在其他地方回答了这个问题。被谷歌搜索并在这里搜索没有任何运气。我能找到的最接近答案是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，因此对newb问题表示歉意！

编辑：Baboo_的答案确实很接近我想要的答案，但是现在看来，在尝试了他的小提琴之后，我可能已经忽略了两件事。首先，过滤器应该能够接受一系列选项。我已经更新了小提琴以显示此内容。

预期效果是过滤器像侧边栏过滤器一样不断更新结果。它是完全可选的。我知道我的Fiddle并不这么认为，因为一切都从一开始就被隐藏了，但我的目的是包括一个已检查所有内容的隐藏过滤器。其他所有输入只是简单地实时优化结果。

Answer 1

您可以像下面这样按预算和大洲依次过滤国家/地区：

computed: {
  filteredCountries: function(){
    return this.countries
     .filter(country => this.search.budget.includes(country.budget))
     .filter(country => this.search.continent.includes(country.continent));
  },
}

这里是fiddle。

在Vue中显示具有多个选项的过滤后的数组

1 个答案: