What's the difference between @input and @change in Vue <input type="file">?

user_11169941 0
Viewed 13732

Please see these two code snippets, they all output the same results:

<template>
  <input type="file" @input="input" />
</template>

<script>
export default {
  methods: {
    input(event) {
      console.log(event.target.files);
    },
  },
};
</script>

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

<script>
export default {
  methods: {
    change(event) {
      console.log(event.target.files);
    },
  },
};
</script>

Is there any difference between @input and @change event in <input type="file" /> element?

vuejs2 vue-component vue.js
1 Answers

These events are inherited from the javascript events oninput and onchange and according to this you could see the difference :

The oninput event occurs when an element gets user input. This event occurs when the value of an <input> or <textarea> element is changed. Tip: This event is similar to the onchange event. The difference is that the oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus, after the content has been changed. The other difference is that the onchange event also works on <select> elements.

Example with simple input text :

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  methods: {
    input() {
      console.log("input")
    },
    change() {
      console.log("change")
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input @change="change" @input="input" />
</div>

user_81728570
Related