How can I implement data validation in Vue.js?

How can I implement data validation in Vue.js?

You can use libraries like Vuelidate or VeeValidate for data validation in Vue.js. Would you like a code example?

Yes, please provide a code example using VeeValidate.

Sure! Here's a simple example:

import { required, minLength } from 'vee-validate/dist/rules';
import { extend } from 'vee-validate';

extend('required', required);
extend('minLength', minLength);

export default {
  data() {
    return {
      name: '',
      errors: {}
    };
  },
  methods: {
    validate() {
      this.errors = {};
      if (!this.name) {
        this.errors.name = 'Name is required.';
      } else if (this.name.length < 3) {
        this.errors.name = 'Name must be at least 3 characters long.';
      }
    }
  }
};

This code sets up basic validation for a name field.

What are the advantages of using VeeValidate over other libraries?

VeeValidate offers a simple API, great documentation, and supports custom validation rules, making it very flexible.