Formulários Vue.js e vinculação de entrada

Formulários são uma parte essencial de aplicativos da web, permitindo que os usuários insiram e enviem dados. O Vue.js simplifica o manuseio de formulários e vinculação de entrada ao fornecer uma maneira intuitiva de gerenciar a entrada do usuário e sincronizá-la com os dados do seu aplicativo. Este artigo o guiará pelos conceitos básicos de trabalho com formulários e vinculação de entrada no Vue.js.

Noções básicas de vinculação de entrada

No Vue.js, a vinculação de dados bidirecional para entradas de formulário é obtida usando a diretiva v-model. Essa diretiva vincula o valor de um elemento de entrada a uma propriedade de dados, garantindo que quaisquer alterações na entrada sejam refletidas nos dados e vice-versa.

<template>
  <div>
    <input v-model="message" placeholder="Type something"/>
    <p>Message: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

Neste exemplo, a diretiva v-model vincula o valor do campo de entrada à propriedade de dados message. Qualquer texto inserido no campo de entrada é imediatamente refletido na propriedade message e exibido no parágrafo.

Trabalhando com diferentes tipos de entrada

A diretiva v-model funciona com vários tipos de entrada, incluindo campos de texto, caixas de seleção, botões de opção e menus suspensos de seleção. Veja como usar v-model com diferentes tipos de entrada:

• Entrada de texto: <input type="text" v-model="text" />
• Caixa de seleção:<input type="checkbox" v-model="checked" />
• Botões de rádio: <input type="radio" v-model="selected" value="option1" />
• Selecione o menu suspenso:<select v-model="selected"> <option value="option1">Option 1</option> </select>

Manipulando o envio do formulário

Para manipular envios de formulários, você pode usar o ouvinte de evento @submit em um elemento <form>. Aqui está um exemplo simples de como manipular envios de formulários no Vue.js:

<template>
  <form @submit.prevent="submitForm">
    <input v-model="username" placeholder="Enter your username"/>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: ''
    };
  },
  methods: {
    submitForm() {
      alert('Form submitted with username: ' + this.username);
    }
  }
};
</script>

Neste exemplo, a diretiva @submit.prevent escuta o evento submit do formulário e previne a ação padrão. O método submitForm é chamado, o que exibe um alerta com o nome de usuário enviado.

Usando validação de formulário

Validar entradas de formulário é uma parte essencial do manuseio de formulários. Embora o Vue.js não forneça validação interna, você pode usar métodos personalizados ou bibliotecas de terceiros como VeeValidate para manipular a validação. Aqui está um exemplo básico de como você pode implementar um método de validação simples:

<template>
  <form @submit.prevent="validateForm">
    <input v-model="email" placeholder="Enter your email"/>
    <span v-if="!isEmailValid">Invalid email address</span>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      isEmailValid: true
    };
  },
  methods: {
    validateForm() {
      const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      this.isEmailValid = emailPattern.test(this.email);
      if (this.isEmailValid) {
        alert('Form submitted with email: ' + this.email);
      }
    }
  }
};
</script>

Neste exemplo, o método validateForm verifica se o endereço de e-mail corresponde a um padrão de expressão regular. Se o e-mail for válido, ele envia o formulário; caso contrário, ele mostra uma mensagem de erro.

Conclusão

Entender os formulários Vue.js e a vinculação de entrada é crucial para construir aplicativos da web interativos e orientados a dados. Ao aproveitar a diretiva v-model e manipular envios de formulários, você pode gerenciar com eficiência a entrada do usuário e criar formulários dinâmicos. Com essas técnicas, você está bem equipado para manipular uma variedade de tarefas relacionadas a formulários em seus aplicativos Vue.js.