Modificadores de Campos de Entrada no Vue.js

O Vue.js oferece modificadores para aprimorar o comportamento da diretiva v-model em campos de entrada, proporcionando maior controle sobre a sincronização dos dados com a instância do Vue.

Modificador .lazy

Por padrão, v-model atualiza os dados vinculados sempre que o evento input é acionado, ou seja, a cada caractere digitado. O modificador .lazy altera esse comportamento para que a atualização ocorra apenas quando o campo perde o foco, utilizando o evento change em vez do evento input:

<!DOCTYPE html>
<html>
<head>
    <title>Explorando Vue.js</title>
    <meta charset="utf-8" />
</head>
<body>
<script src="https://unpkg.com/vue"></script>
    <div id="app">
    <input v-model.lazy="name" class="form-control" />
    <span>Digitado: {{ name }}</span>
    </div>
    <script>
        Vue.createApp({
            data() {
                return { 
                    name: ''
                };
            }
        }).mount('#app');
    </script>
</body>
</html>

Nesse exemplo, a propriedade name só será atualizada quando o campo perder o foco, em vez de ser atualizada a cada caractere digitado.

Modificador .number

Mesmo que o tipo do campo seja number, os valores digitados são armazenados como strings. O modificador .number converte automaticamente o valor inserido em um número:

<div id="app">
<input v-model.number="age" type="number">
<span>Digitado: {{ age }}</span>
</div>
<script>
    Vue.createApp({
        data() {
            return { 
                age: 0
            };
        }
    }).mount('#app');
</script>

Aqui, a propriedade age armazena o valor como número, eliminando a necessidade de conversões manuais.

Modificador .trim

O modificador .trim remove automaticamente espaços em branco no início e no final da string digitada:

<div id="app">
<input v-model.trim="message">
<span>Digitado: {{ message }}</span>
</div>
<script>
    Vue.createApp({
        data() {
            return { 
                message: ''
            };
        }
    }).mount('#app');
</script>

Isso impede que espaços desnecessários sejam armazenados na propriedade message, garantindo um dado mais limpo.

Combinação de Modificadores

Os modificadores podem ser combinados para aplicar múltiplas transformações ao valor da entrada:

<input v-model.lazy.number="age" type="number">

Nesse caso, o valor de age será atualizado apenas quando o campo perder o foco, e o valor inserido será convertido para número.