TypeError: Невозможно прочитать свойство '0' из неопределенного при попытке войти в мои $ refs

Question

Я не знаю, где я ошибаюсь, но в моей консоли написано:

TypeError: Невозможно прочитать свойство '0' из неопределенного в VueComponent.selectFile (vSingleUpload.vue? Cf02: 23)

Но в моем пользовательском интерфейсе он не падает или что-либо воспроизводится без ошибок.

---

    <template>
  <section>
    <v-content>
      <v-container>
        <v-form enctype="multipart/form-data">
          <v-file-input label="file input" type="file" @change="selectFile" ref="userFile"></v-file-input>
        </v-form>
      </v-container>
    </v-content>
  </section>
</template>

<script>
export default {
  data() {
    return {
      file: ""
    };
  },

  methods: {
    selectFile: function() {
      this.file = this.$refs.userFile.files[0];
    }
  }
};
</script>

<style lang="scss">
</style>

Answer 1

v-file-input не предоставляет свойства files, поэтому this.$refs.userFile.files будет undefined.

. Вы можете получить файл напрямую в качестве аргумента, передаваемого в прослушиватель событий, например:

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>

ref не требуется, равно как и type="file".