Why is Vue giving error while loading image

Question

I am getting this error when I am trying to load image in vue using vuetify.

Error: TypeError: Cannot read property 'files' of undefined"

The component:

<v-file-input
          accept="image/*"
          label="File input"
          @change="uploadData($event)"
        ></v-file-input>

The method:

 methods: {
    uploadData(event) {
      let file = event.target.files[0];
      console.log(file);
    }
}

Boussadjra Brahim · Accepted Answer · 2020-10-11 13:18:11Z

1

The @change has files array as parameter by default, no need to specify the $event parameter :

<div id="app">
  <v-app id="inspire">
    <v-file-input
      accept="image/*"
      label="File input"
       @change="uploadData"       
    ></v-file-input>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
   methods: {
    uploadData(files) {
   console.log(files)
    }
}
})

LIVE DEMO

answered Oct 11, 2020 at 13:18

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why is Vue giving error while loading image

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related