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

編集履歴

質問編集履歴

6

質問内容の修正

2022/01/12 14:09

投稿

Fukusuke0604
Fukusuke0604

スコア555

test CHANGED
File without changes
test 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

test CHANGED
@@ -1 +1 @@
1
- Vue3 v-modelの値を定数に代入してaxios経由でPOST　Laravel
1
+ Vue3 v-modelの情報を関数内で取得する方法がわかりません。
test CHANGED
@@ -1,4 +1,16 @@
1
- vue3 単一コンポーネントで<input>タグのv-modelの値を定数に代入し、const dataにappendし、axios経由でLaravel DBへPOSTするコードを書きました。
1
+ <input>タグのv-modelの値をaxios経由でPOSTするコードを書きました。
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
+
8
+ ```javascript
9
+ data.append("title", this.title);
10
+ data.append("comment", this.comment);
11
+ ```
12
+
13
+ コード全体は以下のように書いています。
2
14
 
3
15
  ```javascript
4
16
  <template>
@@ -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,40 +58,6 @@
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
-
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
61
 
84
62
  // Canvasのデータをblob化/title/commetをaxiosでPOST
85
63
  saveCanvas: (canvas_id)=> {
@@ -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

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

3

内容の修正

2022/01/12 08:12

投稿

Fukusuke0604
Fukusuke0604

スコア555

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

2

内容の修正

2022/01/12 08:10

投稿

Fukusuke0604
Fukusuke0604

スコア555

test CHANGED
@@ -1 +1 @@
1
- Vue.js3 v~modelの値を定数に代入してaxios経由でPOST　Laravel
1
+ Vue.js3 v-modelの値を定数に代入してaxios経由でPOST　Laravel
test 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

test CHANGED
@@ -1 +1 @@
1
- vue.js 定数が定義されない。
1
+ Vue.js3 v~modelの値を定数に代入してaxios経由でPOST　Laravel
test CHANGED
@@ -1,181 +1,136 @@
1
- ３つの<input>
1
+ <input>タグのv-modelの値を定数に代入し、const dataにappendし、axios経由でPOSTするコードを書きました。
2
2
 
3
- canvas画像
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>
4
17
 
18
+ <!-- タイトル入力 -->
5
- title
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>
6
27
 
28
+ <!-- input内容を表示 -->
7
- comment
29
+ <div>
30
+ <p>{{ title }}</p>
31
+ <p>{{ comment }}</p>
32
+ </div>
8
33
 
9
34
 
10
-
11
- を、axios経由でPOSTし、Laravel6DBに保存を行う為に下記コードを作成しました。
12
-
13
-
14
-
15
- ```javascript
16
-
17
-
18
-
19
- <template>
20
-
21
- <div>
22
-
23
- <!-- 画像エリア -->
24
-
25
- <div id="image_area">
26
-
27
- <canvas ref="preview" id="preview"></canvas>
28
-
29
- <input type="file" name="image" accept="image/*" ref="selectimage" @change="previewImage"/>
30
-
31
- </div>
32
-
33
- <p>
34
-
35
- <input type="text" id="canvas_text" value="" />
36
-
37
- <button type="button" @click="drawText('preview', 'canvas_text')">
38
-
39
- 文字を描く
40
-
41
- </button>
42
-
43
- </p>
44
-
45
-
46
-
47
- <!-- タイトル入力 -->
48
-
49
- <div>
50
-
51
- <input v-model="title" type="text" name="title" placeholder="タイトル">
52
-
53
- </div>
54
-
55
- <div>
56
-
57
- <!-- コメント入力エリア -->
58
-
59
- <textarea name="comment" cols="30" rows="10" v-model="comment" placeholder="コメント入力"></textarea>
60
-
61
- </div>
62
-
63
- <button @click="saveCanvas('preview')">アップロード</button>
64
-
65
35
  </div>
66
-
67
36
  </template>
37
+
68
-
38
+ <script>
69
39
  export default {
70
40
 
71
41
  data(){
72
-
73
42
  return {
74
-
75
43
  title:"",
76
-
77
44
  comment:""
78
-
79
45
  }
80
-
81
46
  },
82
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
+ },
83
66
 
84
-
67
+ //キャンバスに文字を描く
85
- methods: {
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
+ },
86
83
 
87
84
  // Canvasのデータをblob化/title/commetをaxiosでPOST
88
-
89
85
  saveCanvas: (canvas_id)=> {
90
-
91
86
  const type = "image/png";
92
-
93
87
  const canvas = document.getElementById(canvas_id);
94
-
95
88
  const dataurl = canvas.toDataURL("image/jpeg", 0.85);
96
-
97
89
  const bin = atob(dataurl.split(",")[1]);
98
-
99
90
  const buffer = new Uint8Array(bin.length);
100
-
101
91
  for (let i = 0; i < bin.length; i++) {
102
-
103
92
  buffer[i] = bin.charCodeAt(i);
104
-
105
93
  }
106
94
 
107
-
108
-
109
95
  const blob = new Blob([buffer.buffer], { type: type });
110
-
96
+ console.log(title);
111
-
112
-
113
97
  //inputタグ v-model="title"の情報を定数titleに代入
114
-
115
98
  const title = this.title;
116
-
117
-
118
-
119
99
  //inputタグ v-model="title"の情報を定数titleに代入
120
-
121
100
  const comment = this.comment;
122
101
 
123
-
124
-
125
102
  //new FormData() を作成
126
-
127
103
  const data = new FormData();
128
-
129
104
  data.append("canvas", blob, "png");
130
-
131
105
  data.append("title",title);
132
-
133
106
  data.append("comment",comment);
134
107
 
135
-
136
-
137
108
 
138
-
139
109
  axios
140
-
141
110
  .post("/api/images", data)
142
-
143
111
  .then((res) => {
144
-
145
112
  console.log("success");
146
-
147
113
  })
148
-
149
114
  .catch((error) => {
150
-
151
115
  new Error(error);
152
-
153
116
  });
154
117
 
155
-
156
-
157
118
  },
158
-
159
-
160
-
161
- },
162
-
163
119
  };
164
120
 
121
+ </script>
165
122
  ```
166
123
 
124
+ しかし、下記コードの箇所で
167
- しかし、下記箇所でUncaught TypeError: Cannot read properties of undefined というエラーがでて、inputタグの入力情報をconst title に代入することができません。
125
+ 「Uncaught TypeError: Cannot read properties of undefined (reading 'title')」と出て、v-modelの値が定数に代入されません。
168
126
 
169
127
  ```javascript
170
-
171
- //inputタグ v-model="title"の情報を定数titleに代入
128
+ //inputタグ v-model="title"の情報を定数titleに代入
172
-
173
129
  const title = this.title;
174
-
130
+ //inputタグ v-model="title"の情報を定数titleに代入
175
-
131
+ const comment = this.comment;
176
-
177
132
  ```
178
133
 
134
+ v-modelの値はreturnされているのですが、定数に代入できません。
135
+ アドバイスをお願いします。
179
136
 
180
-
181
- <input　v-model="title">タグに入力した値がconst titleに代入されていないのが原因だと思うのですが、どのように書けば、Uncaught TypeError: Cannot read properties of undefined というエラーを回避できるでしょうか？
Vue.jsaxios
Vue.jsaxios