input fileで同じファイルを連続で選ぶと@changeイベントが発火しない問題

input fileで同じファイルを連続で選ぶと@changeイベントが発火しない問題(Vue.js)

原因：
changeイベントが発火しないことでした。

解決方法：
一度写真を追加し、削除しても追加したデータを裏方で保持しているためもう一度追加した際に、changeイベントを発火しないというものです。
追加が完了した際に、裏方のデータを削除することで修正可能です。

下記のブログを参考に作成しています。
https://strip.koatech.info/articles/vue-input-same-file/

①@changeの最後にvalueを空にする

<template>
  <div>
    <input @change="onChange" accept="image/jpeg, image/png" type="file">
  </div>
</template>
<script>
export default {
  methods: {
    onChange(e) {
      const file = e.target.files[0]
      const reader = new FileReader()
      reader.onload = (e) => {
        console.log(e.target.result)
        //@changeの最後にvalueを空にする
        e.target.value = ''
      }
      reader.readAsDataURL(file)
    }
  }
}
</script>

②@clickでe.target.valueを空にする

<template>
  <div>
    <!-- @clickでe.target.valueを空にする -->
    <input @change="onChange" accept="image/jpeg, image/png" type="file" @click="(e) => { e.target.value = '' }">
  </div>
</template>
<script>
export default {
  methods: {
    onChange(e) {
      const file = e.target.files[0]
      const reader = new FileReader()
      reader.onload = (e) => {
        console.log(e.target.result)
      }
      reader.readAsDataURL(file)
    }
  }
}
</script>