Vue.jsを用いて管理アプリを作成しています。
写真を貼り付ける機能の実装に至り、
VueインスタンスのdataにあるinfoDataオブジェクトのプロパティphotoURLに写真情報(dataURL)を格納したいのですが以下のエラーメッセージが返されます。プロパティが未定義と書いてあるのはわかりますがなぜこのようになったのかを教えていただきたいです。また、解決法があればそれも共に教えていただきたいです。
宜しくお願いします。
以下エラーメッセージ
main.js:48 Uncaught TypeError: Cannot set property 'photoURL' of undefined
HTML
1<HTML> 2<div id="fileBtn"> 3 <input type="file" v-on:change="photoUpload"> 4</div> 5 <div id="bg"></div> 6</HTML>
javascript
1<script>new Vue({ 2 el: "#fileBtn", 3 data: { 4 infoData: { 5 title: "", //タイトル 6 photoURL: "" //イメージURL 7 } 8 }, 9 10 //メソッド 11 methods: { 12 13 photoUpload: function (evt) { 14 15 var file = evt.target.files; 16 var reader = new window.FileReader(); 17 18 //dataURL形式でファイルを読み込む 19 reader.readAsDataURL(file[0]); 20 21 //ファイルの読込が終了した時の処理 22 reader.onload = function () { 23 var dataUrl = reader.result; 24 this.InfoData.photoURL = dataUrl;//ここでエラーがでます 25 26 //読み込んだ画像を貼り付け 27 document.getElementById("bg").innerHTML = "<img class='adjust' src='" + dataUrl + "'>"; 28 } 29 30 } 31 } 32}) 33 34</script>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。