每当用户输入数据时，如何强制触发@change/@input 事件？

Question

I can use input DOM element to upload an image and pass its data to a function like so:

<input type="file" @change="myFunction"/>

but since the event is @change , it only fires when the image data changes. When I want to upload the same image twice, the event doesn't fire. I've tried using the @input event instead but it behaves exactly the same, not firing when the same image is uploaded.

Is there any way to upload the same image twice?

Answer 1

You can achieve that by attaching the @click event and then empty the target value event.currentTarget.value = ''

Live Demo :

 new Vue({ el: '#app', methods: { myClickFunction(e) { e.currentTarget.value = ''; }, myFunction() { console.log('call'); } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <input type="file" @click="myClickFunction" @change="myFunction"/> </div>