5 примеров использования filter во Vue для упрощения разработки

Введение

Filter стал одним из часто используемых инструментов работы с данными во фронтенд-разработке. При создании пользовательских интерфейсов на Vue вы довольно часто сталкиваетесь с необходимостью фильтровать коллекции: будь то массивы товаров, записи в таблице, списки задач или даже сложные структуры с поиском и динамическим обновлением. Несмотря на то что с версии Vue 3 фильтры во Vue-шаблонах были удалены (vue-template filters), их логика легко переносится в вычисляемые свойства и методы. Я хочу показать вам на практике, как вы можете применять filter в самых типичных, а иногда и нестандартных задачах, чтобы ваш код оставался чистым, эффективным и удобным для поддержки.

В этом обзоре вы увидите пять хорошо проработанных кейсов применения массива filter внутри компонентов Vue. Беру только реальные сценарии: здесь нет надуманных задач, только то, что действительно пригодится даже если вы только недавно приступили к изучению Vue.

Фильтрация списка с помощью строкового поиска

Реализация поиска по списку в реальном времени

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

<template>
  <div>
    <input v-model="search" placeholder="Поиск по имени..." />
    <ul>
      <li v-for="user in filteredUsers" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>

<script>
// Массив пользователей и строка поиска
export default {
  data() {
    return {
      search: "",
      users: [
        { id: 1, name: "Алиса" },
        { id: 2, name: "Борис" },
        { id: 3, name: "Виктория" },
      ],
    };
  },
  computed: {
    // Фильтруем пользователей по введенной строке
    filteredUsers() {
      return this.users.filter(user =>
        user.name.toLowerCase().includes(this.search.toLowerCase())
      );
    }
  }
};
</script>

В этом примере каждый раз, когда вы меняете значение в input, автоматически пересчитывается массив filteredUsers, благодаря filter внутри вычисляемого свойства. Этот подход хорош своей простотой и скоростью исполнения, ведь filter работает непосредственно с массивом и не требует никакого дополнительного кода в шаблоне.

Фильтрация массива по условиям в чекбоксах

Пример сложной фильтрации по нескольким признакам

Рассмотрим задачу чуть сложнее: фильтрация товаров по наличию и категории. То есть вы можете выбрать "только в наличии" и интересующую вас категорию, а список товаров обновится.

<template>
  <div>
    <label>
      <input type="checkbox" v-model="onlyAvailable" />
      Только в наличии
    </label>
    <select v-model="selectedCategory">
      <option value="">Все категории</option>
      <option v-for="cat in categories" :key="cat" :value="cat">
        {{ cat }}
      </option>
    </select>
    <ul>
      <li v-for="product in filteredProducts" :key="product.id">
        {{ product.name }} ({{ product.category }}) - {{ product.available ? "В наличии" : "Нет в наличии" }}
      </li>
    </ul>
  </div>
</template>

<script>
// Список продуктов, чекбокс наличия и выпадающий список по категориям
export default {
  data() {
    return {
      onlyAvailable: false,
      selectedCategory: "",
      products: [
        { id: 1, name: "Ноутбук", category: "Электроника", available: true },
        { id: 2, name: "Гитара", category: "Музыка", available: false },
        { id: 3, name: "Телефон", category: "Электроника", available: true },
        { id: 4, name: "Мольберт", category: "Хобби", available: true }
      ]
    };
  },
  computed: {
    categories() {
      // Формируем массив уникальных категорий для фильтра
      return [...new Set(this.products.map(p => p.category))];
    },
    filteredProducts() {
      return this.products
        // Сначала, если нужно, оставляем только товары в наличии
        .filter(product => !this.onlyAvailable || product.available)
        // Затем применяем фильтр по категории, если она выбрана
        .filter(product => !this.selectedCategory || product.category === this.selectedCategory);
    }
  }
};
</script>

Здесь, как видите, filter легко комбинируется для последовательной фильтрации по разным условиям. Такой паттерн часто встречается во всевозможных фильтрационных компонентах маркетплейсов и админок.

Фильтрация и подсчет значений в массиве

Использование filter для построения статистики

Filter можно использовать не только для вывода данных на экран, но и для подсчета конкретных значений, например, количества завершенных задач в todo-листе.

<template>
  <div>
    <h3>Всего задач: {{ tasks.length }}</h3>
    <h3>Завершено: {{ doneTasksCount }}</h3>
    <ul>
      <li v-for="task in tasks" :key="task.id">
        <input type="checkbox" v-model="task.done" /> {{ task.name }}
      </li>
    </ul>
  </div>
</template>

<script>
// Массив задач с признаком выполнения
export default {
  data() {
    return {
      tasks: [
        { id: 1, name: "Купить продукты", done: false },
        { id: 2, name: "Решить задачу по программированию", done: true },
        { id: 3, name: "Прочитать статью", done: false }
      ]
    };
  },
  computed: {
    // Считаем сколько задач выполнено (done: true)
    doneTasksCount() {
      return this.tasks.filter(task => task.done).length;
    }
  }
};
</script>

Такой способ хорош для статистики — вы не только фильтруете, но сразу получаете искомое количество. К тому же, при изменении состояния задач счетчик обновляется автоматически, как и должно быть во Vue.

Динамическая фильтрация таблицы

Реализация фильтрации таблицы по нескольким полям

Ситуация из жизни: у вас есть простая таблица сотрудников, фильтр происходит как по строке поиска, так и по должности (роль выбирается из выпадающего списка).

<template>
  <div>
    <input v-model="search" placeholder="Поиск по имени или email..." />
    <select v-model="roleFilter">
      <option value="">Все роли</option>
      <option v-for="role in roles" :key="role">{{ role }}</option>
    </select>
    <table>
      <thead>
        <tr>
          <th>Имя</th>
          <th>Email</th>
          <th>Роль</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="person in filteredStaff" :key="person.id">
          <td>{{ person.name }}</td>
          <td>{{ person.email }}</td>
          <td>{{ person.role }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
// Таблица сотрудников с фильтрацией по имени/email и роли
export default {
  data() {
    return {
      search: "",
      roleFilter: "",
      staff: [
        { id: 1, name: "Юлия", email: "yulia@mail.com", role: "Менеджер" },
        { id: 2, name: "Никита", email: "nikita@mail.com", role: "Разработчик" },
        { id: 3, name: "Ирина", email: "irina@mail.com", role: "HR" }
      ]
    };
  },
  computed: {
    roles() {
      // Уникальные значения по роли для выпадающего списка
      return [...new Set(this.staff.map(s => s.role))];
    },
    filteredStaff() {
      // Фильтрация по роли и наличию текстового поиска
      return this.staff
        .filter(person => 
          !this.roleFilter || person.role === this.roleFilter
        )
        .filter(person =>
          person.name.toLowerCase().includes(this.search.toLowerCase()) ||
          person.email.toLowerCase().includes(this.search.toLowerCase())
        );
    }
  }
};
</script>

В этом примере комбинируются сразу две фильтрации через filter: по роли и по значению в тексте. Такой метод отлично подходит для админских таблиц, дэшбордов и любого подобного интерфейса.

Фильтрация с дополнительной трансформацией данных

Пример: фильтрация дат и форматирование результата

Допустим, в вашем приложении есть массив событий, для которых требуется показывать только предстоящие (например, дата больше сегодняшней). При этом дату события нужно красиво отформатировать. Смотрите, как filter и map решают задачу вместе.

<template>
  <div>
    <h4>Ближайшие события:</h4>
    <ul>
      <li v-for="event in upcomingEvents" :key="event.id">
        {{ event.name }} — {{ event.prettyDate }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      events: [
        { id: 1, name: "Vue Meetup", date: "2024-07-15T18:00:00Z" },
        { id: 2, name: "Hackathon", date: "2023-12-01T12:00:00Z" },
        { id: 3, name: "IT-конференция", date: "2024-08-09T10:00:00Z" }
      ]
    };
  },
  computed: {
    // Оставляем только будущие события и форматируем дату
    upcomingEvents() {
      const now = new Date();
      return this.events
        .filter(event => new Date(event.date) > now)
        .map(event => ({
          ...event,
          prettyDate: new Date(event.date).toLocaleString("ru-RU", {
            day: "2-digit",
            month: "long",
            year: "numeric",
            hour: "2-digit",
            minute: "2-digit"
          })
        }));
    }
  }
};
</script>

Сначала filter фильтрует события, чья дата позже текущей. Затем map превращает дату в красиво отформатированную строку. Это наглядный пример, как filter часто используется в паре с другими методами массива.

Заключение

Метод filter в связке с массивами — это почти универсальный инструмент для работы с коллекциями данных в приложениях на Vue. Он подходит для широкого спектра задач: от простого поиска по списку до сложных кросс-фильтраций и вычислений статистики. С помощью filter ваш код становится предсказуемым, декларативным и очень простым для сопровождения.

В Vue логика фильтрации почти всегда выносится в вычисляемые свойства, где она пересчитывается автоматически при изменении зависимостей. Это один из столпов реактивного подхода, который отличает Vue от менее структурированных решений. Теперь, увидев на практике пять разных подходов, вы сможете с легкостью реализовать фильтрацию для своих данных вне зависимости от уровня сложности и специфики проекта.

Частозадаваемые технические вопросы по теме статьи и ответы на них

Можно ли фильтровать массив прямо в шаблоне с помощью filter?

В Vue 3 не рекомендуется применять сложные выражения (вроде myArray.filter(...)) прямо в шаблоне внутри v-for, потому что фильтрация будет повторяться каждый рендер и может вызвать лишние пересчёты. Корректнее выполнять filter внутри вычисляемых свойств, а в шаблоне использовать уже отфильтрованный результат.

Как фильтровать сложные вложенные массивы?

Используйте filter внутри вложенных вычисляемых свойств или методов. Например, если у вас есть массив проектов, каждый из которых содержит массив задач, можно использовать filter внутри map для вложенных коллекций:

computed: {
  filteredProjects() {
    return this.projects.map(proj => ({
      ...proj,
      tasks: proj.tasks.filter(task => task.done)
    }));
  }
}

Есть ли разница между использованием filter в computed и method?

Если filter применяется внутри computed — результат кэшируется и пересчитывается только при изменении зависящих реактивных данных. Если внутри метода — пересчёт происходит каждый раз при обновлении компонента. Для производительности обычно предпочтительнее computed.

Как добавить поиск без учета регистра и спецсимволов?

Сначала приводите строки к одному регистру (.toLowerCase()), при необходимости воспользуйтесь регулярными выражениями с помощью .replace(/[^a-zа-я0-9]/gi, '') для удаления нежелательных символов перед сравнением.

Фильтрация по нескольким условиям (например, и/или)?

Объединяйте условия в одном фильтре. Для "и" используйте логическое &&, для "или" — ||:

filtered = items.filter(i => (i.active && i.category == 'A') || i.urgent);

Такой подход гибко комбинируется для сложных фильтров.