Vinculação de Dados Bidirecional. Diretiva v-model - Vue.js

Anteriormente, explorou-se o uso de vínculo unidirecional em Vue.js através de interpolação. No entanto, o Vue também oferece suporte a vínculo bidirecional, que é implementado utilizando a diretiva v-model. Essa diretiva é aplicável apenas a elementos HTML como <input>, <select>, <textarea> e componentes Vue.

Aqui está um exemplo básico:

<!DOCTYPE html>
<html>
<head>
<title>Aprendendo Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
    <p>Insira seu nome:
        <input type="text" v-model="userName" placeholder="Digite seu nome" />
    </p>
    <p>Seu nome: {{ userName }}</p>
</div>
<script>
const vueApp = Vue.createApp({
    data() {
    return { userName: 'Tom' };
    }
}).mount('#app');
</script>
</body>
</html>

Neste exemplo, há um campo de texto que está vinculado ao atributo userName do objeto Vue através da diretiva v-model. O valor do atributo é atualizado automaticamente conforme o texto é digitado no campo. Não é necessário configurar um manipulador de eventos para capturar o valor inserido ou atualizar o atributo manualmente. Isso ocorre devido ao vínculo bidirecional: o campo de texto obtém o valor inicial do atributo userName e, ao mesmo tempo, qualquer alteração no campo é refletida no objeto Vue.

Vamos considerar outro exemplo que calcula a área de um retângulo:

<!DOCTYPE html>
<html>
<head>
<title>Aprendendo Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
    <p>Largura: <input type="number" v-model="width" placeholder="Digite a largura" /></p>
    <p>Altura: <input type="number" v-model="height" placeholder="Digite a altura" /></p>
    <p>Área do retângulo: {{ width * height }}</p>
</div>
<script>
const vueApp = Vue.createApp({
    data() {
    return { width: 20, height: 10 };
    }
}).mount('#app');
</script>
</body>
</html>

Neste caso, há dois campos de entrada: um vinculado ao atributo width e outro ao atributo height. Quando um valor é inserido em qualquer um dos campos, a área do retângulo é recalculada automaticamente e exibida.

A diretiva v-model ignora os atributos HTML value, checked e selected ao configurar o estado inicial dos elementos vinculados. O estado inicial deve ser definido diretamente nas propriedades do modelo de dados no código JavaScript, por exemplo:

<!DOCTYPE html>
<html>
<head>
    <title>Exemplo com v-model</title>
    <meta charset="utf-8" />
</head>
<body>
    <script src="https://unpkg.com/vue"></script>
    <div id="app">
        <!-- O atributo checked será ignorado -->
        <input type="checkbox" checked v-model="isChecked" />
        <p>Checkbox está: {{ isChecked ? 'Marcado' : 'Desmarcado' }}</p>
    </div>
    <script>
        const vueApp = Vue.createApp({
            data() {
                return { isChecked: false }; // O estado inicial é configurado aqui
            },
        }).mount('#app');
    </script>
</body>
</html>

Neste exemplo:

Apesar de o atributo checked estar presente no HTML, ele será ignorado porque o Vue controla o estado do checkbox através do v-model.
O estado inicial do checkbox é determinado pelo valor de isChecked no modelo de dados (false).
Quando a página carrega, o checkbox aparecerá desmarcado, refletindo o valor inicial de isChecked.

Manipulando Checkbox com v-model em Vue.js