同じファイルをupload時に@changeが発火しない
Vue.jsでこの記事を参考に画像アップロード・プレビュー機能を作っていたら、一度アップした画像を取り消した後再度同じ画像をアップすると@changeが発火しなかった
解決策
refでDOM要素を引っ張ってvalueを消す
form.vue
<template>
...
<label class="img-title-label" v-show="!imageUrl"
>画像を選択
<input ref="imageUploader" type="file" @change="onFileChange" />
</label>
...
</template>
<script>
...
methods: {
removeImage() {
this.$refs.imageUploader.value = ''
this.imageUrl = ''
this.imageTitle = ''
}
}
...
</script>
ref は要素または子コンポーネントに参照を登録するために使用されます。参照は親コンポーネントの $refs オブジェクトのもとに登録されます。プレーンな DOM 要素に使用する場合は、参照はその要素になります。
公式ドキュメント
参照が残ってるってことでよいのかしら