web-dev-qa-db-ja.com

Vuetifyテキストフィールドを非同期で検証する方法は?

テキストフィールド Vuetifyにはrules小道具があり、trueまたはエラー文字列を返す関数の配列を取ります。 XHRを使用してサーバー側で検証を行うことができるように、それらを非同期にする方法は?

何かのようなもの:

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

1つの解決策は、error-messagesプロパティを設定することです。

<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']
        })
    }
  }
});
6
niutech