How can I handle form errors in Vue 3?

How can I handle form errors in Vue 3?

In Vue 3, you can handle form errors by using the v-model directive for two-way data binding and validating inputs with computed properties or methods.

Can you give me an example of how to validate a form field?

Sure! You can create a method that checks if the input meets certain criteria, like this:

methods: {
  validateInput() {
    if (this.inputValue.length < 3) {
      this.errorMessage = 'Input must be at least 3 characters long.';
    } else {
      this.errorMessage = '';
    }
  }
}

What about displaying the error message in the template?

You can use a conditional rendering directive like v-if to show the error message in your template:

<div>
  <input v-model="inputValue" @blur="validateInput" />
  <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
</div>

Is there a way to handle multiple form fields?

Yes, you can create an object to hold the values and errors for each field, and validate them in a similar way. This allows you to manage multiple fields efficiently.