VeeValidate3のfile|image系バリデーションの@change="validate"を関数で呼び出す

↓下記の記事にたどり着けたなら正直このQiitaは不要かも知れません。
https://logaretm.github.io/vee-validate/advanced/file-validation.html#html-file-validation

この記事はVeeValidate3の記事です。
VeeValidate2では書き方が異なります。

refを使ってVeeValidateのvalidateを外の関数から呼び出そう！

ref属性にはDOM要素のオブジェクトとコンポーネントインスタンスが登録されています！
中を追って見るとfileもちゃんと入ってるから関数側で色んな事ができますね！！

vm.$refs

validate関数はただ呼び出して上げるだけでruleに則したエラーを吐いてくれます！

<template>
  <ValidationProvider rules="required|image" ref="provider" v-slot="{ validate, errors }">
    <input type="file" @change="handleFileChange" />
    <p>{{ errors[0] }}</p>
  </ValidationProvider>
</template>

<script>
export default {
  methods: {
    handleFileChange(e) {
      // NOTE: refはValidationProviderタグで定義したproviderの中にslotのvalidateが入ってる！
      this.$refs.provider.validate(e);

      // ここ以降に自由にfile changeした時にやりたい処理を書こう！！
    }
  }
};
</script>

まとめ

最初に紹介したこのVeeValidate公式を読めばオールオッケイ！！
https://logaretm.github.io/vee-validate/advanced/file-validation.html#html-file-validation

この記事マジでいらねえぞ！？
せっかく書いたし消すのもあれだな…。

検索苦手な方の手助けになれば…なるかな？？

参考にこの一休.comさんの記事も読んで見てください！
VeeValidate 2から3へのアップデート