Sometimes, we want to file input value change in Vue.js.

In this article, we’ll look at how to file input value change in Vue.js.

How to file input value change in Vue.js?

To file input value change in Vue.js, we can add the @change directive to our file input.

For instance, we write

<template>
  <div>
    <input type="file" @change="previewFiles" multiple />
  </div>
</template>

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

to add the file input with

<input type="file" @change="previewFiles" multiple />

The previewFiles method runs when we select files with the file input because we added @change="previewFiles".

In previewFiles, we get the selected files with the event.target.files property.

Conclusion

To file input value change in Vue.js, we can add the @change directive to our file input.