やりたいこと
Vuetifyのv-file-inputを使いCSVファイルをインポート、ファイルの内容をv-datatableに表示する。
環境
Vue.js 2.6.11
vuetify 2.2.11
##エラー内容
vue.runtime.esm.js:619 [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'files' of undefined"
このファイルの情報を取得する部分でエラーがでてる?
const file = e.target.files[0];
普通のinput type="file"で実装した時は問題なく動作したんだけど、、、
VueとVuetify初心者なので先輩方アドバイスのほどお願いします。。。
ソース
HTML
<v-col> <!-- <input @change="fileChange" type="file" id="file_input_expense" name="file_input_expense" /> --> <v-file-input v-on:change="fileChange" label="CSVファイルを選択してください" id="file_input_expense" type="file" ></v-file-input> </v-col>
JS
methods: {
fileChange: function(e) {
const file = e.target.files[0];
const reader = new FileReader();
const workers = [];
const loadFunc = () => { const lines = reader.result.split("\n"); lines.forEach(element => { const workerData = element.split(","); if (workerData.length != 12) return; const worker = { TradeTerms: workerData[0], ShipmentBy: workerData[1], ShipTo: workerData[2], PO: workerData[3], CommodityDescription: workerData[4], Manufacturer: workerData[5], QTY: workerData[6], Unit: workerData[7], UnitPrice: workerData[8], TotalPrice: workerData[9], RequestETD: workerData[10], Remarks: workerData[11] }; workers.push(worker); }); this.workers = workers; }; reader.onload = loadFunc; reader.readAsBinaryString(file); }, btnClick: function(e) { { alert(this.workers); } }
}
};
</script>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。