🎮 Реактивность и вычисляемые свойства для фильтрации данных

Проблема: необходимо динамически обновлять интерфейс в зависимости от ввода пользователя, например, при фильтрации списка элементов.

Решение: в книге «Building Real-World Web Applications with Vue.js 3» автор показывает, как эффективно использовать реактивные данные и вычисляемые свойства для реализации фильтрации в реальном времени.

Пример кода:

<template>
  <div>
    <input v-model="searchQuery" placeholder="Поиск..." />
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const items = ref([
  { id: 1, name: 'Яблоко' },
  { id: 2, name: 'Банан' },
  { id: 3, name: 'Вишня' },
]);

const searchQuery = ref('');

const filteredItems = computed(() => {
  return items.value.filter(item =>
    item.name.toLowerCase().includes(searchQuery.value.toLowerCase())
  );
});
</script>