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

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

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

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

Q&A

解決済

1回答

1950閲覧

V-modelでバインドしたinputタグの内容をaxios経由でPOSTしたい。Vue.js

tkm0604

総合スコア552

Vue.js

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

0グッド

0クリップ

投稿2022/01/17 14:10

V-modelでバインドした内容をaxios経由でPOSTしたいのですが、以下の<input>タグ、V-modelでバインドした箇所の入力内容が「undefined」となり、POSTできません。

javascript

1 <!-- タイトル入力 --> 2 <div> 3 <input v-model="title" type="text" name="title" placeholder="タイトル"> 4 </div> 5 <div> 6 <!-- コメント入力エリア --> 7 <textarea v-model="comment" name="comment" cols="30" rows="10" placeholder="コメント入力"></textarea> 8 </div>

POSTを行う関数は以下です。
data.append("title", this.title);の箇所で、「 Cannot read properties of undefined (reading 'title')」となっています。

javascript

1 // Canvasのデータをblob化/title/commetをaxiosでPOST 2 saveCanvas: (canvas_id)=> { 3 const type = "image/png"; 4 const canvas = document.getElementById(canvas_id); 5 const dataurl = canvas.toDataURL("image/jpeg", 0.85); 6 const bin = atob(dataurl.split(",")[1]); 7 const buffer = new Uint8Array(bin.length); 8 for (let i = 0; i < bin.length; i++) { 9 buffer[i] = bin.charCodeAt(i); 10 } 11 12 const blob = new Blob([buffer.buffer], { type: type }); 13 14 //new FormData() を作成 15 const data = new FormData(); 16 data.append("canvas", blob, "png"); 17 data.append("title", this.title); 18 data.append("comment", this.comment); 19 20 21 axios 22 .post("/api/images", data) 23 .then((res) => { 24 console.log("success"); 25 }) 26 .catch((error) => { 27 new Error(error); 28 }); 29 console.log("hello"); 30 },

単一テンプレートのコード全体は以下のように書いています。

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 // canvasの画像をinput type="file"にプレビュー 47 previewImage: function () { 48 let file = this.$refs.selectimage.files; //ファイル情報の取得 49 const canvas = this.$refs.preview; //canvasタグ 50 const fileReader = new FileReader(); 51 fileReader.onload = function () { 52 const ctx = canvas.getContext("2d"); 53 const image = new Image(); 54 image.src = fileReader.result; 55 image.onload = function () { 56 canvas.width = image.width; 57 canvas.height = image.height; 58 ctx.drawImage(image, 0, 0); 59 }; 60 }; 61 fileReader.readAsDataURL(file[0]); 62 }, 63 64 //キャンバスに文字を描く 65 drawText: (canvas_id, text_id)=> { 66 const canvas = document.getElementById(canvas_id); 67 const ctx = canvas.getContext("2d"); 68 const text = document.getElementById(text_id); 69 //文字のスタイルを指定 70 ctx.font = "32px serif"; 71 ctx.fillStyle = "#404040"; 72 //文字の配置を指定(左上基準にしたければtop/leftだが、文字の中心座標を指定するのでcenter 73 ctx.textBaseline = "center"; 74 ctx.textAlign = "center"; 75 //座標を指定して文字を描く(座標は画像の中心に) 76 const x = canvas.width / 2; 77 const y = canvas.height / 2; 78 ctx.fillText(text.value, x, y); 79 }, 80 81 // Canvasのデータをblob化/title/commetをaxiosでPOST 82 saveCanvas: (canvas_id)=> { 83 const type = "image/png"; 84 const canvas = document.getElementById(canvas_id); 85 const dataurl = canvas.toDataURL("image/jpeg", 0.85); 86 const bin = atob(dataurl.split(",")[1]); 87 const buffer = new Uint8Array(bin.length); 88 for (let i = 0; i < bin.length; i++) { 89 buffer[i] = bin.charCodeAt(i); 90 } 91 92 const blob = new Blob([buffer.buffer], { type: type }); 93 94 //new FormData() を作成 95 const data = new FormData(); 96 data.append("canvas", blob, "png"); 97 data.append("title", this.title); 98 data.append("comment", this.comment); 99 100 101 axios 102 .post("/api/images", data) 103 .then((res) => { 104 console.log("success"); 105 }) 106 .catch((error) => { 107 new Error(error); 108 }); 109 }, 110 }, 111}; 112</script> 113

どうすれば、V-modelでバインドしたinputタグの内容をPOSTできるでしょうか?
アドバイスお願いします

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

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

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

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

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

guest

回答1

0

ベストアンサー

アロー関数で書くのをやめればいいです。アロー関数を避けるべきと記載があります。

https://v3.ja.vuejs.org/guide/data-methods.html#%E3%83%A1%E3%82%BD%E3%83%83%E3%83%88%E3%82%99

js

1saveCanvas: (canvas_id)=> {} 2 3saveCanvas(canvas_id) {}

投稿2022/01/17 23:54

sousuke

総合スコア3828

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

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

tkm0604

2022/01/21 05:27

返信が遅くなり申し訳ありませんでした。 ありがとうございます!! アロー関数で書いていた箇所を訂正するとPOSTできるようになりました!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問