How to handle forms with validation in Vue.js?

Vue.js provides features like v-model for form input binding and can be combined with computed properties and methods for form validation.

<template>
  <form @submit.prevent="submitForm">
    <input v-model="username" :class="{ 'error': !isUsernameValid }" placeholder="Username">
    <span v-if="!isUsernameValid">Please enter a valid username</span>
    <button type="submit" :disabled="!isFormValid">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
    };
  },
  computed: {
    isUsernameValid() {
      // Validation logic for the username
      return this.username.length >= 3;
    },
    isFormValid() {
      // Additional form-level validation logic
      return this.isUsernameValid;
    },
  },
  methods: {
    submitForm() {
      // Form submission logic
    },
  },
};
</script>