tekitoumemo’s diary

.NET CoreとVue、Angularなどの技術ブログを書いています。みんなの洋楽ランキングを運営しています。

VeeValidateで一括検証+スクロールするmixins

v3ではValidationObserverが追加され、一括検証が楽になった(v2知らない😇)
一括検証+エラーの要素にスクロールできれば嬉しいはずなので、そのmixinsを書く。
スクロールはお任せで、vue-scrolltoとかいいんじゃないかしら。

page/hoge.vue

<ValidationObserver ref='observer'>
    <ValidationProvider/>
    <ValidationProvider/>
</ValidationObserver>

<script>
import Validate from '~/mixins/validate'
export default {
    mixins: [ Validate ],
    methods: {
        async onSubmit() {
            if (!await this.validateAll()) {
                // Do something
            }
        }
    },
}
</script>

mixins/validate.js

export default {
  methods: {
    async validateAll() {
        const result = await this.$refs.observer.validate()
        const ref = Object.values(this.$refs.observer.refs)
                .filter((ref) => ref.errors.length > 0)[0]
        // refに対してスクロールやらなんやら
        return result
    }
}