Estoy usando VueJS con vuetify . Tengo una etiqueta de entrada y un botón que activa la función @click , una vez que cambio al componente v-file-input aparece un error.
Aquí está el código - script y plantilla:
<script> import papa from "papaparse"; export default { name: "CompareInput", data() { return { csvData: [], }; }, methods: { csvToJson() { let csvFile = this.$refs.file.files[0]; if (csvFile == undefined) { alert("Please select a file to convert"); this.csvData = []; return; } papa.parse(csvFile, { header: true, dynamicTyping: true, skipEmptyLines: true, preview: 100, complete(result) { this.csvData = result.data; for (let item of this.csvData) { console.log(item.input_fullName); } console.log(this.csvData); }, }); }, }, }; </script> <template> <div class="app"> <h3>CSV Parser</h3> <v-file-input multiple ref="file" type="file"> </v-file-input> <v-btn @click="csvToJson" class="primary">Submit</v-btn> </div> </template>Nuevamente, todo funciona bien con la etiqueta de entrada normal.
Supongo que no entendiste la respuesta de @JenifferJin .
Tu error está en esta línea:
let csvFile = this.$refs.file.files[0]; Está haciendo referencia al componente v-file-input , pero está tratando de trabajar con él como con la etiqueta de input HTML nativa. Esto no debe hacerse.
v-file-input no contiene el campo de archivos directamente. Puede ver esto por sí mismo si escribe algo como esto y mira en la consola del navegador:
... csvToJson() { console.log(this.$refs.file) ... } ... Cuando trabaje con v-file-input , debe usar v-model para almacenar su archivo (o archivos).
Entonces la respuesta es:
<v-file-input v-model="filesModel" multiple type="file"> </v-file-input> ... data() { return { filesModel: [], }; }, ... methods: { csvToJson() { if (this.filesModel === null || this.filesModel === undefined || this.filesModel.length === 0) { alert("Please select a file to convert"); return; } let csvFile = this.filesModel[0]; ...the rest of your code }, }, Hay un CodePen que puede ayudarlo a comprender la diferencia entre v-file-input e input .
Aquí está mi experiencia:
<v-file-input show-size counter accept="video/*" v-model="video" @change="onVideo" > </v-file-input>en métodos de Vue.js:
onVideo: function () { console.log(this.video) }