How do I use file input in Vue?

How do I use file input in Vue?

To use file input in Vue, you can use the <input type='file'> element and bind it to a data property.

Can you show me a simple example?

Sure! Here's a basic example:

<template>
  <input type='file' @change='handleFileUpload'>
</template>

<script>
export default {
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      console.log(file);
    }
  }
}
</script>

How can I display the selected file name?

You can create a data property to store the file name and update it in the handleFileUpload method.

What if I want to restrict the file types?

You can use the accept attribute in the <input> tag to restrict file types, like this: <input type='file' accept='.jpg,.png'>.