No sé dónde me equivoco aquí, pero en mi consola dice:

TypeError: No se puede leer la propiedad '0' de undefined en VueComponent.selectFile (vSingleUpload.vue? Cf02: 23)

Pero en mi interfaz de usuario no se bloquea ni nada que se muestre sin errores.


    <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>
0
user12056490 25 sep. 2019 a las 04:38

1 respuesta

La mejor respuesta

v-file-input no expone una propiedad files, por lo que this.$refs.userFile.files será undefined.

Puede obtener el archivo directamente como el argumento pasado a su detector de eventos, así:

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>

No se requiere ref, ni type="file".

0
skirtle 25 sep. 2019 a las 02:40