Массивы в рефах

Реф может хранить любое значение: число, текст, true или false, а также массив. Заказ в кафе — это список того, что выбрал посетитель, поэтому он хранится как массив в рефе:

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

const order = ref([]);

function addToOrder(name) {
    order.value.push(name);
}
</script>

<template>
    <button @click="addToOrder('Эспрессо')">Эспрессо</button>
    <button @click="addToOrder('Мятный чай')">Мятный чай</button>
    <p>Ваш заказ: {{ order.join(", ") }}</p>
    <p>Позиций: {{ order.length }}</p>
</template>

Нажмите «Эспрессо», а затем «Мятный чай» — страница покажет «Ваш заказ: Эспрессо, Мятный чай» и «Позиций: 2». В скрипте массив — это order.value, и push() добавляет в него элемент. В шаблоне order — сам массив, со своими методами и своей length.

Vue замечает любое изменение массива, а не только новый .value. Все эти способы обновляют страницу:

• order.value.push("Эспрессо") добавляет элемент в конец.
• order.value.pop() убирает последний элемент.
• order.value.splice(1, 1) убирает элементы из любого места массива: первое число — индекс, с которого начать, второе — сколько элементов убрать. Этот вызов убирает один элемент, второй. Он пригодится в следующем уроке, где у каждой позиции заказа будет своя кнопка «Убрать».
• order.value = [] даёт рефу совершенно новый массив, здесь пустой. Так используют методы, которые создают новый массив и оставляют старый как был, например filter(): order.value = order.value.filter((name) => name !== "Эспрессо");.

В следующем уроке мы ещё и покажем каждую позицию в отдельном элементе, а не склеим их в один текст.