38elements.github.io - vuelidateメモ

vuelidateメモ

38elements.github.io Spined HTML

vuelidateメモ vuelidateメモ Github Document 使い方 Vueにインストールする。 import {Vue} from 'vue'; import {Vuelidate} from 'vuelidate'; Vue.use(Vuelidate); オプションのvalidationsキーにvalidatorを登録する。 import {required, alphaNum, maxLength} from 'vuelidate/lib/validators'; export default { data() { return { form: { id: '', password: '', }, }, }, // dataのキーに対応するvalidatorを登録する validations: { form: { id: { required, alphaNum, maxLength: maxLength(64), }, password: { required, maxLength: maxLength(64), }, }, }, } vm.$v.form.id.$touch()を実行することによって、vm.$v.form.id.$dirtyがtrueになる。 vm.$v.form.idにはidの結果が入る。 vm.$v.formにはidとpasswordをvalidateした総合的な結果が入る。 <input v-model.trim="form.id" @input="$v.form,id.$touch()"> vm.$v.<key>の値 validationsで登録した各validatorの結果 $invalid: 不適切かどうか $dirty: $touch()されたかどうか。$resetでfalseになる。 $error: $invalid && $dirty $pending: Asynchronous validationが検証中かどうか $params:  withParams()の引数 $each: Collections validationの結果 vm.$v.<key>の値 $touch(): $dirtyをtrueにする $reset(): $dirtyをfalseにする validatorの実装方法 * Vue.jsメモ Vuexメモ ≪Elixir Github Star Ranking at 2017/11/18 Main PHP Github Star Ranking at 2017/10/29≫