v-model Modifiers

Modifiers change the behavior of v-model.

.lazy - update on change

1<template>
2  <!-- Default - updates on every input -->
3  <input v-model="immediate" placeholder="Immediate" />
4
5  <!-- .lazy - updates on blur/enter -->
6  <input v-model.lazy="lazy" placeholder="Lazy" />
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 - convert to number

1<template>
2  <!-- Without .number - string -->
3  <input v-model="stringValue" type="number" />
4  <p>Type: {{ typeof stringValue }} = {{ stringValue }}</p>
5
6  <!-- With .number - number -->
7  <input v-model.number="numberValue" type="number" />
8  <p>Type: {{ typeof numberValue }} = {{ numberValue }}</p>
9
10  <!-- Calculations -->
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 - remove whitespace

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

Combining Modifiers

1<template>
2  <!-- All together -->
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>