我正在VueJS與vuetify. 我有一個輸入標簽和觸發函式的按鈕@click，一旦我更改為v-file-input組件，我就會收到錯誤訊息。
這是代碼 - 腳本和模板：
<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>同樣，使用常規輸入標簽一切正常。
uj5u.com熱心網友回復：
我猜你誤解了@JenifferJin 的回答。
你的錯誤在這一行：
let csvFile = this.$refs.file.files[0];
您正在參考v-file-input組件，但嘗試像使用本機 HTMLinput標記一樣使用它。不應該這樣做。
v-file-input不直接包含檔案欄位。如果你寫這樣的東西并查看瀏覽器控制臺，你可以親眼看到這一點：
...
csvToJson() {
console.log(this.$refs.file)
...
}
...
當您使用 時v-file-input，您應該使用v-model來存盤您的檔案（或多個檔案）。
所以答案是：
<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
},
},
有一個CodePen，可以幫助您了解之間的差異v-file-input和input。
uj5u.com熱心網友回復：
這是我的經驗：
<v-file-input
show-size counter
accept="video/*"
v-model="video"
@change="onVideo"
>
</v-file-input>
在 Vue.js 的方法中：
onVideo: function () {
console.log(this.video)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/380342.html
標籤：javascript html Vue.js Vuetify.js
上一篇：如果數字包含斜杠，如何洗掉最后兩個字符(vue.js)
下一篇：如何使用v-for洗掉行