Modyfikatory v-model

Modyfikatory zmieniają zachowanie v-model.

.lazy - aktualizacja na change

1<template>
2  <!-- Domyślnie - aktualizacja na każdy input -->
3  <input v-model="immediate" placeholder="Natychmiastowa" />
4
5  <!-- .lazy - aktualizacja na blur/enter -->
6  <input v-model.lazy="lazy" placeholder="Leniwa" />
7</template>
8
9<script setup>
10import { ref, watch } from 'vue'
11
12const immediate = ref('')
13const lazy = ref('')
14
15watch(immediate, (val) => console.log('Immediate:', val))
16watch(lazy, (val) => console.log('Lazy:', val))
17</script>

.number - konwersja do liczby

1<template>
2  <!-- Bez .number - string -->
3  <input v-model="stringValue" type="number" />
4  <p>Typ: {{ typeof stringValue }} = {{ stringValue }}</p>
5
6  <!-- Z .number - number -->
7  <input v-model.number="numberValue" type="number" />
8  <p>Typ: {{ typeof numberValue }} = {{ numberValue }}</p>
9
10  <!-- Obliczenia -->
11  <p>String + 10 = {{ stringValue + 10 }}</p>
12  <p>Number + 10 = {{ numberValue + 10 }}</p>
13</template>
14
15<script setup>
16import { ref } from 'vue'
17
18const stringValue = ref('')
19const numberValue = ref(0)
20</script>

.trim - usunięcie białych znaków

1<template>
2  <!-- Bez .trim -->
3  <input v-model="untrimmed" placeholder="Bez trim" />
4  <p>Długość: {{ untrimmed.length }} "{{ untrimmed }}"</p>
5
6  <!-- Z .trim -->
7  <input v-model.trim="trimmed" placeholder="Z trim" />
8  <p>Długość: {{ trimmed.length }} "{{ trimmed }}"</p>
9</template>
10
11<script setup>
12import { ref } from 'vue'
13
14const untrimmed = ref('')
15const trimmed = ref('')
16</script>

Kombinowanie Modyfikatorów

1<template>
2  <!-- Wszystkie razem -->
3  <input
4    v-model.lazy.trim="text"
5    placeholder="Lazy + Trim"
6  />
7
8  <input
9    v-model.number.lazy="amount"
10    type="number"
11    placeholder="Number + Lazy"
12  />
13</template>
14
15<script setup>
16import { ref } from 'vue'
17
18const text = ref('')
19const amount = ref(0)
20</script>