質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

5631閲覧

vuetify のv-file-inputコンポーネントを使用した際にファイル情報の取得ができない

suzuki999

総合スコア8

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2020/07/16 23:48

編集2020/07/17 00:02

やりたいこと

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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

解決方法

<input type="file"> こっちだとJSにEVENTオブジェクト渡すみたい。

<v-file-input> こっちはEVENTオブジェクトじゃなくてFileオブジェクトを渡す。

だからJSの
const file = e.target.files[0];の所を

const file = e;にしてあげればうまく動く。

Fileオブジェクトそのまま渡すだけなのにめちゃ時間かかってしまった。。。
同じ過ちを起こさないように初心者のだれか参考として使ってください。

投稿2020/07/17 06:27

suzuki999

総合スコア8

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問