Отфильтрованное меню

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

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

const menu = [
    { id: 1, name: "Эспрессо", price: 2 },
    { id: 5, name: "Морковный торт", price: 4 },
    { id: 6, name: "Чизкейк", price: 5 },
];
const maxPrice = ref(4);

const affordable = computed(() => {
    return menu.filter((item) => item.price <= maxPrice.value);
});
</script>

<template>
    <input v-model.number="maxPrice" type="number">
    <ul>
        <li v-for="item in affordable" :key="item.id">{{ item.name }}</li>
    </ul>
</template>

v-for проходит по affordable, как по любому массиву. Сначала список показывает эспрессо и морковный торт. Когда клиент вводит 2, Vue фильтрует заново, потому что изменился maxPrice, который читает функция, и в списке остаётся только эспрессо. filter() создаёт новый массив, поэтому сам menu не меняется.

Обратите внимание: у menu нет .value. Это обычный массив, а не реф, потому что он никогда не меняется. .value есть только у рефов и вычисляемых значений.

В этом упражнении клиент выбирает категорию в выпадающем списке и ищет по названию. v-model уже кладёт выбранное и введённое в category и search, но список по-прежнему показывает всё menu. Одно вычисляемое значение может читать оба рефа, и Vue пересчитает его, когда изменится любой из них.

Совет для поиска: includes() сообщает, содержит ли один текст другой, но для него "Чай" и "чай" — разные тексты. Сначала переведите оба в нижний регистр с помощью toLowerCase().