テキストフィールド Vuetifyにはrules
小道具があり、true
またはエラー文字列を返す関数の配列を取ります。 XHRを使用してサーバー側で検証を行うことができるように、それらを非同期にする方法は?
何かのようなもの:
<v-text-field :rules="[v => { axios.get('/check?value=' + val).then(() => { return true }) }]">
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']
})
}
}
});