teratail
回答率
85.30%
質問するログイン新規登録
トップVue.jsに関する質問Vue3 v-modelの情報を関数内で取得する方法がわかりません。

編集履歴

質問編集履歴

6

質問内容の修正

2022/01/12 14:09

投稿

Fukusuke0604
Fukusuke0604

スコア555

title CHANGED
File without changes
body CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  <template>内の、v-model="title"　と、v-model="comment"の値をsaveCanvas()関数内で取得し、POSTしたいのですが、下記コードの("title", this.title);の箇所で[Uncaught TypeError: Cannot read properties of undefined (reading 'title')] となり、v-modelの値が取得できません。
4
4
 
5
- どうすれば、v-modelの情報を関数内で取得して
5
+ どうすれば、v-modelの情報を関数内で取得できるでしょうか？
6
6
 
7
7
 
8
8
  ```javascript
Vue.jsaxios

5

質問に追記

2022/01/12 14:08

投稿

Fukusuke0604
Fukusuke0604

スコア555

title CHANGED
@@ -1,1 +1,1 @@
1
- Vue3 v-modelの値を定数に代入してaxios経由でPOST　Laravel
1
+ Vue3 v-modelの情報を関数内で取得する方法がわかりません。
body CHANGED
@@ -1,6 +1,18 @@
1
- vue3 単一コンポーネントで<input>タグのv-modelの値を定数に代入し、const dataにappendし、axios経由でLaravel DBへPOSTするコードを書きました。
1
+ <input>タグのv-modelの値をaxios経由でPOSTするコードを書きました。
2
2
 
3
+ <template>内の、v-model="title"　と、v-model="comment"の値をsaveCanvas()関数内で取得し、POSTしたいのですが、下記コードの("title", this.title);の箇所で[Uncaught TypeError: Cannot read properties of undefined (reading 'title')] となり、v-modelの値が取得できません。
4
+
5
+ どうすれば、v-modelの情報を関数内で取得して
6
+
7
+
3
8
  ```javascript
9
+ data.append("title", this.title);
10
+ data.append("comment", this.comment);
11
+ ```
12
+
13
+ コード全体は以下のように書いています。
14
+
15
+ ```javascript
4
16
  <template>
5
17
  <div>
6
18
  <!-- 画像エリア -->
@@ -21,7 +33,7 @@
21
33
  </div>
22
34
  <div>
23
35
  <!-- コメント入力エリア -->
24
- <textarea name="comment" cols="30" rows="10" v-model="comment" placeholder="コメント入力"></textarea>
36
+ <textarea v-model="comment" name="comment" cols="30" rows="10" placeholder="コメント入力"></textarea>
25
37
  </div>
26
38
  <button @click="saveCanvas('preview')">アップロード</button>
27
39
 
@@ -46,41 +58,7 @@
46
58
  },
47
59
 
48
60
  methods: {
49
- // canvasの画像をinput type="file"にプレビュー
50
- previewImage: function () {
51
- let file = this.$refs.selectimage.files; //ファイル情報の取得
52
- const canvas = this.$refs.preview; //canvasタグ
53
- const fileReader = new FileReader();
54
- fileReader.onload = function () {
55
- const ctx = canvas.getContext("2d");
56
- const image = new Image();
57
- image.src = fileReader.result;
58
- image.onload = function () {
59
- canvas.width = image.width;
60
- canvas.height = image.height;
61
- ctx.drawImage(image, 0, 0);
62
- };
63
- };
64
- fileReader.readAsDataURL(file[0]);
65
- },
66
61
 
67
- //キャンバスに文字を描く
68
- drawText: (canvas_id, text_id)=> {
69
- const canvas = document.getElementById(canvas_id);
70
- const ctx = canvas.getContext("2d");
71
- const text = document.getElementById(text_id);
72
- //文字のスタイルを指定
73
- ctx.font = "32px serif";
74
- ctx.fillStyle = "#404040";
75
- //文字の配置を指定（左上基準にしたければtop/leftだが、文字の中心座標を指定するのでcenter
76
- ctx.textBaseline = "center";
77
- ctx.textAlign = "center";
78
- //座標を指定して文字を描く（座標は画像の中心に）
79
- const x = canvas.width / 2;
80
- const y = canvas.height / 2;
81
- ctx.fillText(text.value, x, y);
82
- },
83
-
84
62
  // Canvasのデータをblob化/title/commetをaxiosでPOST
85
63
  saveCanvas: (canvas_id)=> {
86
64
  const type = "image/png";
@@ -93,17 +71,12 @@
93
71
  }
94
72
 
95
73
  const blob = new Blob([buffer.buffer], { type: type });
96
- console.log(title);
97
- //inputタグ v-model="title"の情報を定数titleに代入
98
- const title = this.title;
99
- //inputタグ v-model="title"の情報を定数titleに代入
100
- const comment = this.comment;
101
74
 
102
75
  //new FormData() を作成
103
76
  const data = new FormData();
104
77
  data.append("canvas", blob, "png");
105
- data.append("title",title);
78
+ data.append("title", this.title);
106
- data.append("comment",comment);
79
+ data.append("comment", this.comment);
107
80
 
108
81
 
109
82
  axios
@@ -114,8 +87,10 @@
114
87
  .catch((error) => {
115
88
  new Error(error);
116
89
  });
117
-
90
+ console.log("hello");
118
91
  },
92
+ },
93
+
119
94
  };
120
95
 
121
96
  </script>
Vue.jsaxios

4

表記の修正

2022/01/12 08:41

投稿

Fukusuke0604
Fukusuke0604

スコア555

title CHANGED
File without changes
body CHANGED
@@ -131,5 +131,5 @@
131
131
  const comment = this.comment;
132
132
  ```
133
133
 
134
- v-modelの値はreturnされているのですが、定数に代入できません。
134
+ v-modelの値はdata()でreturnされているのですが、定数に代入できません。
135
135
  アドバイスをお願いします。
Vue.jsaxios

3

内容の修正

2022/01/12 08:12

投稿

Fukusuke0604
Fukusuke0604

スコア555

title CHANGED
@@ -1,1 +1,1 @@
1
- Vue.js3 v-modelの値を定数に代入してaxios経由でPOST　Laravel
1
+ Vue3 v-modelの値を定数に代入してaxios経由でPOST　Laravel
body CHANGED
File without changes
Vue.jsaxios

2

内容の修正

2022/01/12 08:10

投稿

Fukusuke0604
Fukusuke0604

スコア555

title CHANGED
@@ -1,1 +1,1 @@
1
- Vue.js3 v~modelの値を定数に代入してaxios経由でPOST　Laravel
1
+ Vue.js3 v-modelの値を定数に代入してaxios経由でPOST　Laravel
body CHANGED
@@ -1,4 +1,4 @@
1
- <input>タグのv-modelの値を定数に代入し、const dataにappendし、axios経由でPOSTするコードを書きました。
1
+ vue3 単一コンポーネントで<input>タグのv-modelの値を定数に代入し、const dataにappendし、axios経由でLaravel DBへPOSTするコードを書きました。
2
2
 
3
3
  ```javascript
4
4
  <template>
Vue.jsaxios

1

2022/01/12 08:09

投稿

Fukusuke0604
Fukusuke0604

スコア555

title CHANGED
@@ -1,1 +1,1 @@
1
- vue.js 定数が定義されない。
1
+ Vue.js3 v~modelの値を定数に代入してaxios経由でPOST　Laravel
body CHANGED
@@ -1,91 +1,135 @@
1
- ３つの<input>
2
- canvas画像
3
- title
4
- comment
5
-
6
- を、axios経由でPOSTし、Laravel6DBに保存を行う為に下記コードを作成しました。
7
-
8
- ```javascript
9
-
10
- <template>
11
- <div>
12
- <!-- 画像エリア -->
13
- <div id="image_area">
14
- <canvas ref="preview" id="preview"></canvas>
15
- <input type="file" name="image" accept="image/*" ref="selectimage" @change="previewImage"/>
16
- </div>
17
- <p>
18
- <input type="text" id="canvas_text" value="" />
19
- <button type="button" @click="drawText('preview', 'canvas_text')">
20
- 文字を描く
21
- </button>
22
- </p>
23
-
24
- <!-- タイトル入力 -->
25
- <div>
26
- <input v-model="title" type="text" name="title" placeholder="タイトル">
27
- </div>
28
- <div>
29
- <!-- コメント入力エリア -->
30
- <textarea name="comment" cols="30" rows="10" v-model="comment" placeholder="コメント入力"></textarea>
31
- </div>
32
- <button @click="saveCanvas('preview')">アップロード</button>
33
- </div>
34
- </template>
35
- export default {
36
- data(){
37
- return {
38
- title:"",
39
- comment:""
40
- }
41
- },
42
-
43
- methods: {
44
- // Canvasのデータをblob化/title/commetをaxiosでPOST
45
- saveCanvas: (canvas_id)=> {
46
- const type = "image/png";
47
- const canvas = document.getElementById(canvas_id);
48
- const dataurl = canvas.toDataURL("image/jpeg", 0.85);
49
- const bin = atob(dataurl.split(",")[1]);
50
- const buffer = new Uint8Array(bin.length);
51
- for (let i = 0; i < bin.length; i++) {
52
- buffer[i] = bin.charCodeAt(i);
53
- }
54
-
55
- const blob = new Blob([buffer.buffer], { type: type });
56
-
57
- //inputタグ v-model="title"の情報を定数titleに代入
58
- const title = this.title;
59
-
60
- //inputタグ v-model="title"の情報を定数titleに代入
61
- const comment = this.comment;
62
-
63
- //new FormData() を作成
64
- const data = new FormData();
65
- data.append("canvas", blob, "png");
66
- data.append("title",title);
67
- data.append("comment",comment);
68
-
69
-
70
- axios
71
- .post("/api/images", data)
72
- .then((res) => {
73
- console.log("success");
74
- })
75
- .catch((error) => {
76
- new Error(error);
77
- });
78
-
79
- },
80
-
81
- },
82
- };
83
- ```
84
- しかし、下記箇所でUncaught TypeError: Cannot read properties of undefined というエラーがでて、inputタグの入力情報をconst title に代入することができません。
85
- ```javascript
86
- //inputタグ v-model="title"の情報を定数titleに代入
87
- const title = this.title;
88
-
89
- ```
90
-
91
- <input　v-model="title">タグに入力した値がconst titleに代入されていないのが原因だと思うのですが、どのように書けば、Uncaught TypeError: Cannot read properties of undefined というエラーを回避できるでしょうか？
1
+ <input>タグのv-modelの値を定数に代入し、const dataにappendし、axios経由でPOSTするコードを書きました。
2
+
3
+ ```javascript
4
+ <template>
5
+ <div>
6
+ <!-- 画像エリア -->
7
+ <div id="image_area">
8
+ <canvas ref="preview" id="preview"></canvas>
9
+ <input type="file" name="image" accept="image/*" ref="selectimage" @change="previewImage"/>
10
+ </div>
11
+ <p>
12
+ <input type="text" id="canvas_text" value="" />
13
+ <button type="button" @click="drawText('preview', 'canvas_text')">
14
+ 文字を描く
15
+ </button>
16
+ </p>
17
+
18
+ <!-- タイトル入力 -->
19
+ <div>
20
+ <input v-model="title" type="text" name="title" placeholder="タイトル">
21
+ </div>
22
+ <div>
23
+ <!-- コメント入力エリア -->
24
+ <textarea name="comment" cols="30" rows="10" v-model="comment" placeholder="コメント入力"></textarea>
25
+ </div>
26
+ <button @click="saveCanvas('preview')">アップロード</button>
27
+
28
+ <!-- input内容を表示 -->
29
+ <div>
30
+ <p>{{ title }}</p>
31
+ <p>{{ comment }}</p>
32
+ </div>
33
+
34
+
35
+ </div>
36
+ </template>
37
+
38
+ <script>
39
+ export default {
40
+
41
+ data(){
42
+ return {
43
+ title:"",
44
+ comment:""
45
+ }
46
+ },
47
+
48
+ methods: {
49
+ // canvasの画像をinput type="file"にプレビュー
50
+ previewImage: function () {
51
+ let file = this.$refs.selectimage.files; //ファイル情報の取得
52
+ const canvas = this.$refs.preview; //canvasタグ
53
+ const fileReader = new FileReader();
54
+ fileReader.onload = function () {
55
+ const ctx = canvas.getContext("2d");
56
+ const image = new Image();
57
+ image.src = fileReader.result;
58
+ image.onload = function () {
59
+ canvas.width = image.width;
60
+ canvas.height = image.height;
61
+ ctx.drawImage(image, 0, 0);
62
+ };
63
+ };
64
+ fileReader.readAsDataURL(file[0]);
65
+ },
66
+
67
+ //キャンバスに文字を描く
68
+ drawText: (canvas_id, text_id)=> {
69
+ const canvas = document.getElementById(canvas_id);
70
+ const ctx = canvas.getContext("2d");
71
+ const text = document.getElementById(text_id);
72
+ //文字のスタイルを指定
73
+ ctx.font = "32px serif";
74
+ ctx.fillStyle = "#404040";
75
+ //文字の配置を指定（左上基準にしたければtop/leftだが、文字の中心座標を指定するのでcenter
76
+ ctx.textBaseline = "center";
77
+ ctx.textAlign = "center";
78
+ //座標を指定して文字を描く（座標は画像の中心に）
79
+ const x = canvas.width / 2;
80
+ const y = canvas.height / 2;
81
+ ctx.fillText(text.value, x, y);
82
+ },
83
+
84
+ // Canvasのデータをblob化/title/commetをaxiosでPOST
85
+ saveCanvas: (canvas_id)=> {
86
+ const type = "image/png";
87
+ const canvas = document.getElementById(canvas_id);
88
+ const dataurl = canvas.toDataURL("image/jpeg", 0.85);
89
+ const bin = atob(dataurl.split(",")[1]);
90
+ const buffer = new Uint8Array(bin.length);
91
+ for (let i = 0; i < bin.length; i++) {
92
+ buffer[i] = bin.charCodeAt(i);
93
+ }
94
+
95
+ const blob = new Blob([buffer.buffer], { type: type });
96
+ console.log(title);
97
+ //inputタグ v-model="title"の情報を定数titleに代入
98
+ const title = this.title;
99
+ //inputタグ v-model="title"の情報を定数titleに代入
100
+ const comment = this.comment;
101
+
102
+ //new FormData() を作成
103
+ const data = new FormData();
104
+ data.append("canvas", blob, "png");
105
+ data.append("title",title);
106
+ data.append("comment",comment);
107
+
108
+
109
+ axios
110
+ .post("/api/images", data)
111
+ .then((res) => {
112
+ console.log("success");
113
+ })
114
+ .catch((error) => {
115
+ new Error(error);
116
+ });
117
+
118
+ },
119
+ };
120
+
121
+ </script>
122
+ ```
123
+
124
+ しかし、下記コードの箇所で
125
+ 「Uncaught TypeError: Cannot read properties of undefined (reading 'title')」と出て、v-modelの値が定数に代入されません。
126
+
127
+ ```javascript
128
+ //inputタグ v-model="title"の情報を定数titleに代入
129
+ const title = this.title;
130
+ //inputタグ v-model="title"の情報を定数titleに代入
131
+ const comment = this.comment;
132
+ ```
133
+
134
+ v-modelの値はreturnされているのですが、定数に代入できません。
135
+ アドバイスをお願いします。
Vue.jsaxios
Vue.jsaxios