Elementos Input e Textarea no Vue.js

No contexto de vinculação bidirecional de dados (two-way data binding), o Vue.js utiliza a diretiva v-model para conectar elementos HTML, como input, select e textarea, às propriedades definidas na instância Vue. Este texto detalha o uso da diretiva v-model em formulários, mostrando como ela simplifica o gerenciamento de dados.

Input

Abaixo está um exemplo com elementos básicos de formulário:

<!DOCTYPE html>
<html>
  <head>
    <title>Explorando Vue.js</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />
  </head>
  <script src="https://unpkg.com/vue"></script>
  <body>
    <div id="app" class="col-md-4 m-4">
      <label>Login</label>
      <input type="text" v-model="login" placeholder="Digite o login" class="form-control" />
      <br />
      <label>Senha</label>
      <input type="password" v-model="password" placeholder="Digite a senha" class="form-control" />
      <br />
      <label>Idade</label>
      <input type="number" v-model="age" min="18" placeholder="Digite a idade" class="form-control" />
      <br />
      <label>Data de Registro</label><br />
      <input type="date" v-model="date" class="form-control" />
      <br />
      <div>
        <h3>Informações Digitadas</h3>
        <p>Login: {{login}}</p>
        <p>Senha: {{'*'.repeat(password.length)}}</p>
        <p>Idade: {{age}}</p>
        <p>Data de Registro: {{date}}</p>
      </div>
    </div>
    <script>
      Vue.createApp({
        data() {
          return {
            login: "",
            password: "",
            date: "",
            age: 18,
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>

A diretiva v-model conecta o atributo value do elemento input a uma propriedade da instância Vue e monitora alterações através do evento input. Isso garante que as mudanças no valor do campo sejam refletidas imediatamente na propriedade correspondente no Vue. Caso o atributo value tenha um valor definido diretamente no HTML, ele será ignorado pela diretiva.

No exemplo acima, os valores digitados nos campos são automaticamente sincronizados com as propriedades no Vue.

Uso de v-model com input em Vue.js

Textarea

O elemento textarea, que permite entrada de texto em múltiplas linhas, também pode ser associado a uma propriedade Vue com a diretiva v-model. O exemplo abaixo ilustra esse uso:

<!DOCTYPE html>
<html>
  <head>
    <title>Explorando Vue.js</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />
  </head>
  <body>
    <script src="https://unpkg.com/vue"></script>
    <div id="app" class="col-md-4 m-4">
      <label>Digite um Comentário</label>
      <textarea v-model="comment" class="form-control"></textarea>
      <br />
      <div>
        <h3>Comentário</h3>
        <p style="white-space: pre-line">{{comment}}</p>
      </div>
    </div>
    <script>
      Vue.createApp({
        data() {
          return {
            comment: "Escreva seu comentário aqui...",
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>

Uso de v-model com textarea

⚠️ Quando a diretiva v-model é aplicada a um elemento textarea, não é possível usar interpolação de texto diretamente dentro do elemento, como no exemplo abaixo:
<textarea v-model="comment" class="form-control">{{ comment }}</textarea>

Além disso, ao inserir texto no textarea usando a tecla Enter, as quebras de linha são mantidas. Para que essas quebras sejam exibidas corretamente no conteúdo renderizado na página, é necessário aplicar o estilo CSS apropriado:

<p style="white-space: pre-line">{{ comment }}</p>

Documentação oficial:

Form Input Bindings