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へのアップデート