質問編集履歴

2

説明文修正

2022/03/12 09:31

投稿

tkm0604
tkm0604

score426

test CHANGED
@@ -1 +1 @@
1
- Vue3 Composition API に書き換えたい
1
+ Javascript Vue3 関数をアロー関数に書き換えたい
test CHANGED
@@ -1,19 +1,10 @@
1
+ 下記のようにアロー関数を用いた書き方をすると
1
- Vue.js Options APIからComposition APIにコードを書き換えています。
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
- // canvasの画像をinput type="file"にプレビュー
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
- previewImage = () => {
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

質問内容修正

2022/03/12 08:36

投稿

tkm0604
tkm0604

score426

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
- saveCanvas = (canvas_id) =>{
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>