Update input value after validation

Question

I’m new to Vue.

I would like to know if it is possible to update the input value after running a custom validation in Vuelidate. I have an input field for postcode. I want to return the postcode with the correct format in case the user forgets to put a whitespace, and update the input field with the correct value, e.g.

user input = XXXXXX
returned output = XXX XXX

Sample code

export default {
  ...
  validations: {
    postcode: {
      required,
      maxLength: maxLength(10),
      validatePostcode: (value) => {
        const result = customValidators.validatePostcode(value);
        if (result !== false) {
          if (result !== value) {
            // UPDATE THE INPUT VALUE HERE WITH THE CORRECT POSTCODE FORMAT
          }
          return true;
        }
        return false;
      }
    }
  }
  ...
}

Answer 1

I changed the arrow function declaration to a function shorthand declaration. I'm now able to access the component object and change the input field value via the Vuelidate model. Thanks to this: https://github.com/vuelidate/vuelidate/issues/237 🙂