Показать отфильтрованный массив с несколькими параметрами в Vue

Question

Извинения, если на этот вопрос ответили в другом месте. Гуглил и искал здесь без всякой удачи. Самый близкий ответ, который я мог бы найти, это здесь , но это требует немного переделок с настройкой, которую я получил.

Я пытаюсь отфильтровать массив на основе нескольких входов пользователя. Моя демонстрация предполагает два входа, но фактическое приложение должно быть около пяти. 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, поэтому извиняюсь за новый вопрос!

Редактировать: ответ Бабу_ очень близок к тому, что я хочу, но, кажется, я, возможно, упустил две вещи теперь, когда попробовал его скрипку. Во-первых, фильтры должны иметь возможность принимать массив опций. Я обновил свою скрипку, чтобы показать это.

Предполагаемый эффект состоит в том, что фильтры постоянно обновляют результаты, как фильтр на боковой панели. Это чисто необязательно. Я понимаю, что мой 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));
  },
}

Вот скрипка .