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

Question

Apologies if this is answered elsewhere. Been googling and searching on here without any luck. Closest answer I could find is here but it requires quite a bit of rework with the setup I've got.

I'm trying to filter an array based on multiple inputs of a user. My demo assumes two inputs but the actual app should approx be five. 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'm using different components for the results and filters with an event bus that sends a payload with search data that feeds into the filtered computed property.

I hope someone's able to point me in the right direction with an approach that hopefully doesn't require more complexity as additional (similar array based) filter options are added.

Still trying to get a grasp on Javascript so apologies for the newb question!

Edit: Baboo_'s answer is really close to what I want but it seems I may have overlooked two things now that I've tried his fiddle. Firstly, the filters should be able to accept an array of options. I've updated my Fiddle to show this.

The intended effect is that the filters are constantly updating the results like a sidebar filter. It's purely optional. I understand that my Fiddle doesn't assume so because everything's hidden from the get-go but my intention is to include a hidden filter that has everything checked in. Every other input is to simply just refine the results in real time.

Answer 1

You can filter the countries successively by budget and continent like this:

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

Here is the fiddle .