[Vuejs]-TypeError: Cannot read property '0' of undefined when trying to log my $refs

by

0👍

✅

v-file-input doesn’t expose a files property, so this.$refs.userFile.files will be undefined.

You can get the file directly as the argument passed to your event listener, like this:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  
  methods: {
    selectFile (file) {
      console.log(file)
    }
  }
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://unpkg.com/@mdi/font@3.9.97/css/materialdesignicons.css" rel="stylesheet">
<link href="https://unpkg.com/vuetify@2.0.18/dist/vuetify.css" rel="stylesheet">
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.0.18/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-form enctype="multipart/form-data">
          <v-file-input label="file input" @change="selectFile"></v-file-input>
        </v-form>
      </v-container>
    </v-content>
  </v-app>
</div>

The ref is not required, nor is the type="file".

Leave a comment