I've been searching high and low, but I can't seem to find a solution to my issue. The closest answer I stumbled upon is here, however, it involves quite a bit of rework from what I currently have set up.
My goal is to filter an array based on multiple user inputs. While my demo only includes two inputs, the actual application will likely have around five. You can check out my progress so far on this 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)),
)
},
}
})
In my actual app, I use different components for results and filters with an event bus that sends search data to the filtered computed property.
If anyone could provide guidance on how to achieve my desired outcome without adding complexity when more filter options are added, I would greatly appreciate it!
Edit: Baboo_'s response is almost there, but I realized I missed a couple of things after testing the fiddle. Firstly, the filters should be able to accept an array of options. I have updated my Fiddle to demonstrate this.
The intended behavior is for the filters to dynamically update the results like a sidebar filter. Although it's optional, I aim to include a hidden filter with everything checked by default. All other inputs should refine the results in real-time.