質問編集履歴
2
説明文修正
test
CHANGED
@@ -1 +1 @@
|
|
1
|
-
Vue3
|
1
|
+
Javascript Vue3 関数をアロー関数に書き換えたい
|
test
CHANGED
@@ -1,19 +1,10 @@
|
|
1
|
+
下記のようにアロー関数を用いた書き方をすると
|
1
|
-
|
2
|
+
「TypeError: Cannot read properties of undefined (reading '$refs')」
|
3
|
+
というエラーになります。
|
2
4
|
|
3
|
-
|
4
|
-
もともとアロー関数を使用していなかったので、関数をアロー関数に書き換え。Composition APIの仕様に沿ってコードを修正しました。
|
5
|
-
|
6
|
-
しかし、以下のコードのpreviewImage()関数でis not definedエラーが出ます。
|
7
5
|
```javascript
|
8
|
-
|
9
|
-
setup(){
|
10
|
-
return {
|
11
|
-
text:"",
|
12
|
-
title:"",
|
13
|
-
comment: "",
|
14
|
-
},
|
15
|
-
|
6
|
+
// canvasの画像をinput type="file"にプレビュー
|
16
|
-
previewImage
|
7
|
+
previewImage:() =>{
|
17
8
|
let file = this.$refs.selectimage.files; //ファイル情報の取得
|
18
9
|
const canvas = this.$refs.preview; //canvasタグ
|
19
10
|
const fileReader = new FileReader();
|
@@ -29,32 +20,13 @@
|
|
29
20
|
};
|
30
21
|
fileReader.readAsDataURL(file[0]);
|
31
22
|
},
|
32
|
-
},
|
33
|
-
</script>
|
34
23
|
```
|
24
|
+
|
35
|
-
|
25
|
+
アロー関数を用いる前の以下のコードではエラーも出ず正常に動作していました。
|
36
26
|
|
37
27
|
```javascript
|
38
|
-
<script>
|
39
|
-
import * as VeeValidate from 'vee-validate';
|
40
|
-
import { Form, Field, ErrorMessage} from 'vee-validate';
|
41
|
-
|
42
|
-
export default {
|
43
|
-
components: {
|
44
|
-
VForm: VeeValidate.Form,
|
45
|
-
VField: VeeValidate.Field,
|
46
|
-
ErrorMessage: VeeValidate.ErrorMessage,
|
47
|
-
},
|
48
|
-
|
49
|
-
setup(){
|
50
|
-
return {
|
51
|
-
text:"",
|
52
|
-
title:"",
|
53
|
-
comment: "",
|
54
|
-
},
|
55
|
-
|
56
28
|
// canvasの画像をinput type="file"にプレビュー
|
57
|
-
|
29
|
+
previewImage: function () {
|
58
30
|
let file = this.$refs.selectimage.files; //ファイル情報の取得
|
59
31
|
const canvas = this.$refs.preview; //canvasタグ
|
60
32
|
const fileReader = new FileReader();
|
@@ -70,96 +42,8 @@
|
|
70
42
|
};
|
71
43
|
fileReader.readAsDataURL(file[0]);
|
72
44
|
},
|
73
|
-
|
74
|
-
//キャンバスに文字を描く
|
75
|
-
drawText = (canvas_id, text_id) => {
|
76
|
-
const canvas = document.getElementById(canvas_id);
|
77
|
-
const ctx = canvas.getContext("2d");
|
78
|
-
const text = document.getElementById(text_id);
|
79
|
-
//文字のスタイルを指定
|
80
|
-
ctx.font = "32px serif";
|
81
|
-
ctx.fillStyle = "#404040";
|
82
|
-
//文字の配置を指定(左上基準にしたければtop/leftだが、文字の中心座標を指定するのでcenter
|
83
|
-
ctx.textBaseline = "center";
|
84
|
-
ctx.textAlign = "center";
|
85
|
-
//座標を指定して文字を描く(座標は画像の中心に)
|
86
|
-
const x = canvas.width / 2;
|
87
|
-
const y = canvas.height / 2;
|
88
|
-
ctx.fillText(text.value, x, y);
|
89
|
-
},
|
90
|
-
|
91
|
-
// Canvasのデータをblob化/title/commetをaxiosでPOST
|
92
|
-
saveCanvas = (canvas_id) =>{
|
93
|
-
const type = "image/png";
|
94
|
-
const canvas = document.getElementById(canvas_id);
|
95
|
-
const dataurl = canvas.toDataURL("image/jpeg", 0.85);
|
96
|
-
const bin = atob(dataurl.split(",")[1]);
|
97
|
-
const buffer = new Uint8Array(bin.length);
|
98
|
-
for (let i = 0; i < bin.length; i++) {
|
99
|
-
buffer[i] = bin.charCodeAt(i);
|
100
|
-
}
|
101
|
-
|
102
|
-
const blob = new Blob([buffer.buffer], { type: type });
|
103
|
-
|
104
|
-
//new FormData() を作成
|
105
|
-
const data = new FormData();
|
106
|
-
data.append("canvas", blob, "png");
|
107
|
-
data.append("title", this.title);
|
108
|
-
data.append("comment", this.comment);
|
109
|
-
|
110
|
-
axios
|
111
|
-
.post("/api/images", data)
|
112
|
-
.then((res) => {
|
113
|
-
console.log("success");
|
114
|
-
})
|
115
|
-
.catch((error) => {
|
116
|
-
new Error(error);
|
117
|
-
|
45
|
+
```
|
118
|
-
},
|
119
46
|
|
120
47
|
|
121
|
-
//////////バリテーションルール////////////
|
122
48
|
|
123
|
-
//テキストバリテーション
|
124
49
|
|
125
|
-
textRequired = (value) =>{
|
126
|
-
if (!value) {
|
127
|
-
return 'テキストは必須項目です';
|
128
|
-
}else if(value.length > 30){
|
129
|
-
return '30文字以内で入力してください。';
|
130
|
-
}
|
131
|
-
return true;
|
132
|
-
},
|
133
|
-
|
134
|
-
//タイトルバリテーション
|
135
|
-
|
136
|
-
titleRequired = (value) =>{
|
137
|
-
if (!value) {
|
138
|
-
return 'タイトルは必須項目です';
|
139
|
-
}else if(value.length > 30){
|
140
|
-
return '30文字以内で入力してください。';
|
141
|
-
}
|
142
|
-
return true;
|
143
|
-
},
|
144
|
-
|
145
|
-
//コメントバリテーション
|
146
|
-
|
147
|
-
commentRequired = (value) => {
|
148
|
-
if (!value) {
|
149
|
-
return 'コメントは必須項目です';
|
150
|
-
}else if(value.length > 255){
|
151
|
-
return '255文字以内で入力してください。';
|
152
|
-
}
|
153
|
-
return true;
|
154
|
-
};
|
155
|
-
|
156
|
-
},
|
157
|
-
};
|
158
|
-
|
159
|
-
</script>
|
160
|
-
```
|
161
|
-
|
162
|
-
{}の数、カンマの位置などに誤りはないか確認したのですが、エラー解決できません。
|
163
|
-
|
164
|
-
また、Composition API では関数はアロー関数で書かなければいけないのでしょうか?
|
165
|
-
(当初setup()にfunctionを用いた関数の書き方ではエラーになりました。)
|
1
質問内容修正
test
CHANGED
@@ -1 +1 @@
|
|
1
|
-
Vue3 Composition API
|
1
|
+
Vue3 Composition API に書き換えたい。
|
test
CHANGED
@@ -1,14 +1,35 @@
|
|
1
1
|
Vue.js Options APIからComposition APIにコードを書き換えています。
|
2
2
|
|
3
3
|
|
4
|
-
もともとアロー関数を使用していなかったので、関数をアロー関数に書き換え。Composition APIの仕様に沿ってコードを
|
4
|
+
もともとアロー関数を使用していなかったので、関数をアロー関数に書き換え。Composition APIの仕様に沿ってコードを修正しました。
|
5
5
|
|
6
|
-
しかし、コードの
|
6
|
+
しかし、以下のコードのpreviewImage()関数でis not definedエラーが出ます。
|
7
7
|
```javascript
|
8
|
-
}, ←ここで「Unexpected token」のエラー
|
9
|
-
|
10
|
-
};
|
11
8
|
|
9
|
+
setup(){
|
10
|
+
return {
|
11
|
+
text:"",
|
12
|
+
title:"",
|
13
|
+
comment: "",
|
14
|
+
},
|
15
|
+
// canvasの画像をinput type="file"にプレビュー
|
16
|
+
previewImage = () => {
|
17
|
+
let file = this.$refs.selectimage.files; //ファイル情報の取得
|
18
|
+
const canvas = this.$refs.preview; //canvasタグ
|
19
|
+
const fileReader = new FileReader();
|
20
|
+
fileReader.onload = function () {
|
21
|
+
const ctx = canvas.getContext("2d");
|
22
|
+
const image = new Image();
|
23
|
+
image.src = fileReader.result;
|
24
|
+
image.onload = function () {
|
25
|
+
canvas.width = image.width;
|
26
|
+
canvas.height = image.height;
|
27
|
+
ctx.drawImage(image, 0, 0);
|
28
|
+
};
|
29
|
+
};
|
30
|
+
fileReader.readAsDataURL(file[0]);
|
31
|
+
},
|
32
|
+
},
|
12
33
|
</script>
|
13
34
|
```
|
14
35
|
全体のコードは以下です。
|
@@ -26,15 +47,14 @@
|
|
26
47
|
},
|
27
48
|
|
28
49
|
setup(){
|
29
|
-
|
30
50
|
return {
|
31
51
|
text:"",
|
32
52
|
title:"",
|
33
53
|
comment: "",
|
34
|
-
}
|
54
|
+
},
|
35
55
|
|
36
56
|
// canvasの画像をinput type="file"にプレビュー
|
37
|
-
previewImage = () => {
|
57
|
+
previewImage = () => {
|
38
58
|
let file = this.$refs.selectimage.files; //ファイル情報の取得
|
39
59
|
const canvas = this.$refs.preview; //canvasタグ
|
40
60
|
const fileReader = new FileReader();
|
@@ -69,7 +89,7 @@
|
|
69
89
|
},
|
70
90
|
|
71
91
|
// Canvasのデータをblob化/title/commetをaxiosでPOST
|
72
|
-
|
92
|
+
saveCanvas = (canvas_id) =>{
|
73
93
|
const type = "image/png";
|
74
94
|
const canvas = document.getElementById(canvas_id);
|
75
95
|
const dataurl = canvas.toDataURL("image/jpeg", 0.85);
|
@@ -102,7 +122,7 @@
|
|
102
122
|
|
103
123
|
//テキストバリテーション
|
104
124
|
|
105
|
-
textRequired = (value) =>
|
125
|
+
textRequired = (value) =>{
|
106
126
|
if (!value) {
|
107
127
|
return 'テキストは必須項目です';
|
108
128
|
}else if(value.length > 30){
|
@@ -113,7 +133,7 @@
|
|
113
133
|
|
114
134
|
//タイトルバリテーション
|
115
135
|
|
116
|
-
titleRequired = (value) =>
|
136
|
+
titleRequired = (value) =>{
|
117
137
|
if (!value) {
|
118
138
|
return 'タイトルは必須項目です';
|
119
139
|
}else if(value.length > 30){
|
@@ -131,9 +151,9 @@
|
|
131
151
|
return '255文字以内で入力してください。';
|
132
152
|
}
|
133
153
|
return true;
|
154
|
+
};
|
155
|
+
|
134
|
-
|
156
|
+
},
|
135
|
-
}, ←ここで「Unexpected token」のエラー
|
136
|
-
|
137
157
|
};
|
138
158
|
|
139
159
|
</script>
|