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

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

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

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

Q&A

解決済

1回答

757閲覧

Vue target.files

退会済みユーザー

退会済みユーザー

総合スコア0

Vue.js

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

0グッド

0クリップ

投稿2019/02/01 01:27

前提・実現したいこと

実行ボタンが押下された際にJSONファイルを読み込み表示をしたいのですが、
target.filesの時点でエラーが出力されます。

発生している問題・エラーメッセージ

[Vue warn]: Error in event handler for "click": "TypeError: Cannot read property 'files' of undefined"

該当のソースコード

vue

1<template> 2 <v-layout justify-center align-center column > 3 <input type="file" id="loader"> 4 <v-btn @click="loadCsvFromFile" color="primary" dark large>実行</v-btn> 5 </v-layout> 6</template> 7 8 9 10<script> 11export default { 12 methods: { 13 loadCsvFromFile: function(){ 14 var obj1 = document.getElementById("loader"); 15 loadFile(obj1); 16 function loadFile(obj1){ 17 file = obj1.target.files[0]; 18 } 19 } 20 } 21} 22</script> 23<style> 24</style> 25

試したこと

console.logで関数が呼ばれている事は確認できました。

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

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

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

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

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

guest

回答1

0

ベストアンサー

file = obj1.target.files[0]file = obj1.files[0]にしたら取得できました

試したコード

html

1<!DOCTYPE html> 2<html> 3<head> 4 <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet"> 5 <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> 7</head> 8<body> 9 <div id="app"> 10 <v-app> 11 <input type="file" id="loader"> 12 <v-btn @click="loadCsvFromFile" color="primary" dark large>実行</v-btn> 13 </v-app> 14 </div> 15 16 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 17 <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script> 18 <script> 19 new Vue({ 20 el: '#app', 21 methods: { 22 loadCsvFromFile: function(){ 23 var obj1 = document.getElementById("loader"); 24 loadFile(obj1); 25 function loadFile(obj1){ 26 file = obj1.files[0]; 27 console.log(file); 28 } 29 } 30 } 31 }); 32 </script> 33</body> 34</html>

投稿2019/02/01 02:30

rururu3

総合スコア5545

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

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

退会済みユーザー

退会済みユーザー

2019/02/01 03:19 編集

お答え頂いた内容とは違いますが、下記のコードでも取得が出来ました。 var file = e.target.files[0] 今回もありがとうございます。
退会済みユーザー

退会済みユーザー

2019/02/01 03:31

別件なのですが、 export default { methods: { loadCsvFromFile: function(e){ var file = e.target.files[0] var reader = new FileReader() reader.onload = function(e){ console.log(file); json = JSON.parse(e.target.result); console.log(json); } } } } 上記のようにFileReaderを使用して読み込んでみようとしているのですが、 reader.onload で発火が出来ないようです。 もしよろしければご回答お願い致します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問