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

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

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

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

Q&A

解決済

1回答

1775閲覧

Vue3 v-modelの情報を関数内で取得する方法がわかりません。

tkm0604

総合スコア552

Vue.js

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

0グッド

0クリップ

投稿2022/01/11 10:23

編集2022/01/21 14:29

<input>タグのv-modelの値をaxios経由でPOSTするコードを書きました。

<template>内の、v-model="title" と、v-model="comment"の値をsaveCanvas()関数内で取得し、POSTしたいのですが、下記コードの("title", this.title);の箇所で[Uncaught TypeError: Cannot read properties of undefined (reading 'title')] となり、v-modelの値が取得できません。

どうすれば、v-modelの情報を関数内で取得できるでしょうか?

javascript

1data.append("title", this.title); 2data.append("comment", this.comment);

コード全体は以下のように書いています。

javascript

1<template> 2 <div> 3 <!-- 画像エリア --> 4 <div id="image_area"> 5 <canvas ref="preview" id="preview"></canvas> 6 <input type="file" name="image" accept="image/*" ref="selectimage" @change="previewImage"/> 7 </div> 8 <p> 9 <input type="text" id="canvas_text" value="" /> 10 <button type="button" @click="drawText('preview', 'canvas_text')"> 11 文字を描く 12 </button> 13 </p> 14 15 <!-- タイトル入力 --> 16 <div> 17 <input v-model="title" type="text" name="title" placeholder="タイトル"> 18 </div> 19 <div> 20 <!-- コメント入力エリア --> 21 <textarea v-model="comment" name="comment" cols="30" rows="10" placeholder="コメント入力"></textarea> 22 </div> 23 <button @click="saveCanvas('preview')">アップロード</button> 24 25 <!-- input内容を表示 --> 26 <div> 27 <p>{{ title }}</p> 28 <p>{{ comment }}</p> 29 </div> 30 31 32 </div> 33</template> 34 35<script> 36export default { 37 38 data(){ 39 return { 40 title:"", 41 comment:"" 42 } 43 }, 44 45 methods: { 46 47 // Canvasのデータをblob化/title/commetをaxiosでPOST 48 saveCanvas: (canvas_id)=> { 49 const type = "image/png"; 50 const canvas = document.getElementById(canvas_id); 51 const dataurl = canvas.toDataURL("image/jpeg", 0.85); 52 const bin = atob(dataurl.split(",")[1]); 53 const buffer = new Uint8Array(bin.length); 54 for (let i = 0; i < bin.length; i++) { 55 buffer[i] = bin.charCodeAt(i); 56 } 57 58 const blob = new Blob([buffer.buffer], { type: type }); 59 60 //new FormData() を作成 61 const data = new FormData(); 62 data.append("canvas", blob, "png"); 63 data.append("title", this.title); 64 data.append("comment", this.comment); 65 66 67 axios 68 .post("/api/images", data) 69 .then((res) => { 70 console.log("success"); 71 }) 72 .catch((error) => { 73 new Error(error); 74 }); 75 console.log("hello"); 76 }, 77 }, 78 79}; 80 81</script>

しかし、下記コードの箇所で
「Uncaught TypeError: Cannot read properties of undefined (reading 'title')」と出て、v-modelの値が定数に代入されません。

javascript

1 //inputタグ v-model="title"の情報を定数titleに代入 2 const title = this.title; 3 //inputタグ v-model="title"の情報を定数titleに代入 4 const comment = this.comment;

v-modelの値はdata()でreturnされているのですが、定数に代入できません。
アドバイスをお願いします。

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

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

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

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

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

guest

回答1

0

自己解決

公式ドキュメントに、「Vue が適切な this の値を束縛するのを防ぐため、 methods を定義する際にはアロー関数を使うのは避けるべきです。」とあるように、アロー関数を使用していたのが原因でした。

投稿2022/01/21 05:29

tkm0604

総合スコア552

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問