Vue.js 2 Design Patterns and Best Practices

Displaying form errors

We can use the $invalid Boolean inside of the $v.model_name object (where model_name is equal to email, firstName, lastName, or password) to display messages or change the look and feel of our form field(s). Let's start off by adding a new class named error that adds a red border around the input field:

<style>input:focus {  outline: none;}.error {  border: 1px solid red;}</style>

We can then conditionally apply this class whenever the field is invalid and touched using v-bind:class:

<div class="input">  <label for="email">Email</label>  <input   :class="{ error: $v.email.$error }"  type="email"   id="email"   @input="$v.email.$touch()"  v-model.trim="email"></div><div class="input">  <label for="firstName">First Name</label> ...