Как реализовать динамическую фильтрацию товаров AJAX в Vue 3

В современном интернет‑торговле быстрое и удобное представление товаров — залог повышенной конверсии. Если вы хотите, чтобы пользователи могли выбирать фильтры и мгновенно видеть обновленный список, без перезагрузки страницы, то вам понадобится динамическая фильтрация товаров через AJAX в Vue 3. В этой статье мы разберём, как подключить fetch к компоненту Vue 3 и обновлять список товаров без перезагрузки страницы. Мы будем использовать простые, но эффективные техники, которые можно быстро применить в любом проекте, будь то WordPress, API‑подключение или собственный бекенд.

Разбор задачи

Представьте, что у вас есть каталог товаров: посты WordPress с мета‑полями, REST‑API или просто JSON‑файл. Пользователь выбирает категорию, бренд, цену. Запрос должен отправляться на сервер, получать отфильтрованные данные, а Vue 3 автоматически обновит список в DOM. Задача состоит из трёх частей: 1) хранить состояние фильтров; 2) отправлять запросы через fetch; 3) реактивно отображать результат. При правильной архитектуре это достигается за несколько строк кода, без лишних зависимостей.

Пошаговое решение

1. Создайте компонент ProductList, где хранить массив products и объект filters. 2. В методе watch следите за изменением filters и вызывайте fetchProducts. 3. В fetchProducts сформируйте URL с query‑параметрами, отправьте fetch запрос, преобразуйте ответ в JSON, присвойте products. 4. В шаблоне используйте v-for для рендеринга товаров, а v-model для селектов/чекбоксов. 5. Добавьте простые unit‑тесты с Jest или Vue Test Utils для проверки, что при смене фильтра компонент обновляет данные. 6. Оптимизируйте запросы: debounce‑те ввод, кэшируйте результаты, чтобы не перегружать сервер. 7. Если используете WordPress, подключите REST‑эндпоинт /wp-json/wp/v2/products и передавайте параметры как ?category=2&brand=apple. 8. В итоге пользователь видит мгновенную реакцию, а ваш код остаётся чистым и поддерживаемым. При правильной реализации динамическая фильтрация товаров AJAX Vue 3 делает ваш каталог привлекательным и быстрым, повышая конверсию и удовлетворённость клиентов.

Рабочий код

// main.js
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

// App.vue

  

    
    
  



import { ref, watch } from 'vue';
import axios from 'axios';
import FilterPanel from './components/FilterPanel.vue';
import ProductList from './components/ProductList.vue';

const filters = ref({ category: null, priceRange: [0, 1000] });
const products = ref([]);

const fetchProducts = async () => {
  try {
    const { data } = await axios.get('/api/products', { params: filters.value });
    products.value = data;
  } catch (err) {
    console.error('Ошибка загрузки товаров', err);
  }
};

// При монтировании сразу загружаем товары
fetchProducts();

// components/FilterPanel.vue

  

    
      Все категории
      {{ c.name }}
    
    
    
    Применить
  



import { ref, watch } from 'vue';
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  modelValue: { type: Object, required: true }
});
const emit = defineEmits(['update:modelValue', 'apply']);

const localFilters = ref({ ...props.modelValue });
watch(localFilters, () => emit('update:modelValue', localFilters.value), { deep: true });
const apply = () => emit('apply');

Типичные ошибки

1. Неиспользование deep‑watch при обновлении вложенных объектов → Vue не фиксирует изменение. 2. Отправка большого объёма данных в query‑string. Лучше использовать POST с JSON. 3. Отсутствие debounce‑а при вводе → слишком много запросов на сервер. 4. Необработанные ошибки AJAX → пользователь видит пустой список без объяснения.

FAQ

Как сделать debounce при изменении фильтров?

Используйте lodash.debounce или просто setTimeout в watch, чтобы задержать запрос на 300‑400 мс после последнего изменения.

Нужно ли кэшировать результаты?

Если набор товаров статичен, сохраняйте ответы в localStorage или Vuex. Это ускорит отклик при повторном открытии страницы.

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

Напишите unit‑тесты с Vue Test Utils, мокируя axios. Проверяйте, что при выборе категории генерируется правильный запрос и список обновляется.

Заключение и чек‑лист

1. Стабильный API: все параметры фильтра принимаются сервером. 2. debounce‑и throttling запросов. 3. Обработка ошибок и пользовательское сообщение. 4. Очистка query‑string при сбросе фильтров. 5. Unit‑тесты для компонентов и API‑моков. 6. Кэширование в localStorage при необходимости. 7. Анализ производительности: измеряйте время отклика и количество запросов. 8. Accessibility: убедитесь, что селекторы и кнопки доступны клавиатурой. 9. SEO: генерируйте статические страницы с возможными фильтрами для поисковых систем. 10. Логирование: фиксируйте ошибки AJAX для дальнейшего улучшения.