Пробелы и числа

То, что вводят посетители, не всегда совпадает с тем, что они имеют в виду, и чаще всего мешают две вещи. Для каждой у v-model есть модификатор: слово после точки, которое меняет его работу, как .enter в @keydown.enter.

Пробелы. Имя, введённое с пробелами вокруг, "  Анна ", попадает в реф вместе с ними. На странице пробелы перед ним в основном исчезают, а вот пробел после него виден: Заказ: Анна . А имя из одних пробелов — это не "", поэтому проверка на пустое имя его не ловит. v-model.trim кладёт в реф текст без пробелов в начале и в конце, как trim():

<input v-model.trim="name">

Числа. Значение поля — всегда текст, и value у варианта списка тоже: value="2" — это "2", а не 2. А текст и числа не складываются, как вы знаете из курса JavaScript: 3 + "2" — это "32". Вот чаевые из выпадающего списка, которые прибавляются к цене капучино:

<select v-model="tip">
    <option value="0">Без чаевых</option>
    <option value="2">€2</option>
</select>
<p>Итого: €{{ price + tip }}</p>

С const price = 3; и выбранными €2 итог получается €32. v-model.number превращает значение в число, прежде чем оно попадёт в реф, и тогда итог — €5:

<select v-model.number="tip">

Ещё два замечания о числах:

• Поле с type="number" — поле для чисел, и Vue сам добавляет .number к его v-model.
• Переключатели и флажки игнорируют .number. Задавайте им значения через :value: :value="2" — это число 2, потому что после : в кавычках пишется JavaScript.