Vinculação de Dados Bidirecional. Diretiva v-model no 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.

Vínculação Bidirecional em Vue.js

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.

Usando v-model em Vue.js

ℹ️ 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

Documentação oficial:

Vinculações de Entrada de Formulário