Как отфильтровать результаты v-for на полученное через select options значение в VueJS?

Question

[MSAFT]

Пишу что-то вроде фильтра товаров по значениям, по типу как в интернет магазинах фильтруют товары.

Есть такой Select:

<select @click="handleBrand" class="custom-select">
      <option v-for="brand in brands.sort()" :data-foo="brand">{{ brand }}</option>
    </select>

Вывожу в фильтр только уникальные значения, без повторений:

computed:   {
      brands() {
        return [...new Set(this.profiles.map(n => n.brand.name))];
      }, }

Получаю выбранное пользователем значение с помощью:

methods: {

      handleBrand(e) {
        if(e.target.options.selectedIndex > -1) {
          console.log(e.target.options[e.target.options.selectedIndex].dataset.foo)
        }
      }, 
}

Проверял через console.log, далее не знаю в какую сторону двигаться просто.

Через handleBrand получаю выбранное значение, например: Brand1.

Ниже все результаты полученные через v-for:

<div v-for="profile in profiles" class="row feed">
---SOME CODE---
        <span>Бренды: {{profile.brand.name}}</span>      
---SOME CODE---
    </div>

Результат примерно следующий:
Brand1
Brand1
Brand2
Brand3

handleBrand условно получил значение Brand1, как прописать, чтоб цикл v-for="profile in profiles" ниже показал только бренды со значением Brand1?

Сам массив profiles приходит через axios из Laravel.

Answer 1

[0xD34F]

Добавляете в компонент свойство brand. И используете его в качестве значения для своего select'а, а метод handleBrand вырезаете:

<select v-model="brand" class="custom-select">

Делаете ещё одно вычисляемое свойство - отфильтрованные элементы из profiles, чей brand.name равен brand:

filteredProfiles() {
  return this.profiles.filter(n => n.brand.name === this.brand);
},

Ну и выводите эти отфильтрованные элементы:

<div v-for="profile in filteredProfiles" class="row feed">

Comments

[MSAFT]

А что делать, когда из массива нужно получить не только бренд(а еще логотип, цену и прочее что нет необходимости фильтровать) и фильтров так же несколько?

<div v-for="profile in filterByBrand" class="row feed">
 <img alt="" :src="`${profile.company.logo}`" width="100%">
<a :href="`/companies/${profile.company.id}`" target="_blank" class="title">{{profile.company.name}}</a>
<span>Бренд: {{profile.brand.name}}
<br>Страна производитель: {{profile.brand.country}}</span>
<p class="text-muted">{{`${profile.sides}`}}</p>
<h5>Цена: {{Math.round(profile.price)}} </h5>
</div>

<select v-model="brand" class="custom-select">
      <option v-for="brand in brands.sort()" :value="brand">{{ brand }}</option>
    </select>

<select  v-model="country" class="custom-select">
      <option v-for="brand in countries.sort()" :value="brand">{{ brand }}</option>
    </select>

<select v-model="side" class="custom-select">
      <option v-for="side in sides.sort()" :value="side">{{ side }}</option>
    </select>

<select v-model="company" class="custom-select">
      <option v-for="company in companies.sort()" :value="company">{{ company }}</option>
    </select>

Сделал как вы советуете,

methods: {

      filterByBrand() {
        return this.profiles.filter(n => n.brand.name === this.brand);
      }, 
}

<div v-for="profile in filterByBrand" class="row feed">

Пробывал еще так:

<div v-for="profile in profiles | filterByBrand" class="row feed">

Но в браузере ничего не отображается, т.е. массив profile empty приходит пустой, смотрел через Vue DevTools

UPD: Хотя даже просто вот так, ничего не отдает:

filteredProfiles() {
        return this.profiles;
      },

Проблема где-то глубже, буду копать

[0xD34F]

MSAFT,

А что делать, когда из массива нужно получить не только бренд(а еще логотип, цену и прочее что нет необходимости фильтровать) и фильтров так же несколько?

Это тянет на отдельный вопрос. И должен сразу предупредить - если он будет выглядеть так же малоинформативно как здесь, я пройду мимо.

Сделал как вы советуете

Брехня, не сделали. Метод и вычисляемое свойство - это не одно и то же.

[MSAFT]

0xD34F,

Пардон, что-то с концетрацией ближе к вечеру совсем не туда.

Вычисляемое свойство же, а не метод!)

Да, в таком случае, всё работает в этом случае:

computed:   {

      filteredProfiles() {
        return this.profiles;
      }, }

Но в этом пусто

computed:   {

      filteredProfiles() {
        return this.profiles.filter(n => n.brand.name === this.brand);
      }, }

Спасибо, очевидно, ваше решение рабочее, но в моем случае надо еще поработать.