How to validate Vuetify text field asynchronously?

Question

Text fields in Vuetify have rules props, which take an array of functions returning true or an error string. How to make them async, so that the validation could be made server-side using XHR?

Something like:

<v-text-field :rules="[v => { axios.get('/check?value=' + val).then(() => { return true }) }]">

Answer 1

One solution is to set the error-messages prop:

<v-text-field v-model="input" :error-messages="errors">

and use the watch option:

new Vue({
  data () {
    return {
      input: '',
      errors: []
    }
  },
  watch: {
    input (val) {
        axios.get('/check?value=' + val).then(valid => {
          this.errors = valid ? [] : ['async error']
        })
    }
  }
});