vue.js - 如何异步验证 Vuetify 文本字段？

Question

Text fields在 Vuetify 中有 rules Prop ，它采用返回 true 或错误字符串的函数数组。如何使它们异步，以便可以使用 XHR 在服务器端进行验证？

类似于:

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

Answer 1

一种解决方案是设置 error-messages Prop :

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

并使用watch选项:

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