如何异步验证 Vuetify 文本字段? [英] How to validate Vuetify text field asynchronously?

问题描述

Text fields 有 rules 属性，其中获取返回 true 或错误字符串的函数数组.如何使它们异步，以便可以使用 XHR 在服务器端进行验证?

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?

类似于:

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

推荐答案

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

One solution is to set the error-messages prop:

并使用 watch 选项:

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

这篇关于如何异步验证 Vuetify 文本字段?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！