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

Question

MSAFT @MSAFT

Vue.js

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

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

Есть такой 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.

Вопрос задан более трёх лет назад
410 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 1

3 комментария

MSAFT @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 @0xD34F Куратор тега Vue.js

MSAFT,

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

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

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

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

Написано более трёх лет назад
MSAFT @MSAFT Автор вопроса
0xD34F,

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

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

Да, в таком случае, всё работает в этом случае:
computed: { filteredProfiles() { return this.profiles; }, }

Но в этом пусто
computed: { filteredProfiles() { return this.profiles.filter(n => n.brand.name === this.brand); }, }

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

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

Vue.js

Простой
Не работают @media-query на Vue 2, как исправить?
- нет подписчиков
- 22 часа назад
- 50 просмотров
0

ответов
Vue.js

+1 ещё

Простой
Почему компонент не получает данные от pinia?
- 1 подписчик
- вчера
- 69 просмотров
1

ответ
Vue.js

Простой
Как изменить иконку календаря по умолчанию у date picker element plus?
- 1 подписчик
- вчера
- 56 просмотров
1

ответ
Vue.js

Простой
Как добавить иконку в Select ElementPlus?
- 1 подписчик
- вчера
- 37 просмотров
1

ответ
Vue.js

+1 ещё

Средний
Как сделать перегрузку функций TS в Vue?
- 1 подписчик
- 15 апр.
- 85 просмотров
1

ответ
Vue.js

Простой
Как убрать иконку календаря на элементе vue date picker?
- 1 подписчик
- 15 апр.
- 50 просмотров
1

ответ
Vue.js

Средний
Как получить ошибку валидации laravel + vue?
- 1 подписчик
- 14 апр.
- 86 просмотров
0

ответов
Vue.js

Средний
Как убрать открытие клавиатуры при фокусе на input?
- 1 подписчик
- 12 апр.
- 46 просмотров
1

ответ
Vue.js

Простой
Как вернуть JSON-объект из i18n VueJS?
- 2 подписчика
- 12 апр.
- 150 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как добавить большой текст с заголовками в локаль i18n во VueJS проекте?
- 1 подписчик
- 12 апр.
- 39 просмотров
0

ответов
Показать ещё Загружается…

Frontend Vue & Capacitor Developer Middle++

Parasol Software

от 2 000 до 2 500 $

Разработчик Vue.js

Кортекс

от 60 000 до 100 000 ₽

Разработчик (Frontend developer / Vue.js)

МСтрой

от 99 999 ₽

Графический дизайнер

18 апр. 2024, в 07:58

500 руб./в час

Разработать мини-приложение Windows 7-11, Linux,Macos

18 апр. 2024, в 07:22

45000 руб./за проект

Каталог AI tools

18 апр. 2024, в 01:12

150000 руб./за проект

Answer 1 · 2019-03-21 22:33:08

Добавляете в компонент свойство 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">

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

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт