質問編集履歴
3
書式の改善
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
### 前提
|
|
1
|
+
### 前提・実現したいこと
|
|
2
2
|
|
|
3
3
|
こんにちは、
|
|
4
4
|
|
|
@@ -222,25 +222,47 @@
|
|
|
222
222
|
|
|
223
223
|
### 試してみたこと
|
|
224
224
|
|
|
225
|
-
上記の該当のコードより、子コンポーネントから親コンポーネントにデータを渡すときに$emitを使うとのことだったので、
|
|
225
|
+
上記の該当のコードより、子コンポーネントから親コンポーネントにデータを渡すときに`$emit`を使うとのことだったので、
|
|
226
226
|
|
|
227
227
|
子コンポーネントより
|
|
228
228
|
|
|
229
|
+
|
|
230
|
+
|
|
229
|
-
@click="ClickedHat(HatItem.image)"
|
|
231
|
+
`@click="ClickedHat(HatItem.image)"`
|
|
230
|
-
|
|
232
|
+
|
|
231
|
-
methodsでClickedHatイベントを作り、親コンポーネントに'ClickHat'を渡し、
|
|
233
|
+
methodsで`ClickedHat`イベントを作り、親コンポーネントに`'ClickHat'`を渡し、
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
234
|
+
|
|
235
|
+
|
|
236
|
+
|
|
235
|
-
親コンポーネントで@ClickHatとして受け取り、ChangeHatメソッドを起動させ
|
|
237
|
+
親コンポーネントで`@ClickHat`として受け取り、`ChangeHat`メソッドを起動させ
|
|
236
|
-
|
|
238
|
+
|
|
237
|
-
ChangeHatでv-bind:src="imagehat"をHatItemimageに変更できるかなと思ったのですが、なかなかうまくいきませんでした。
|
|
239
|
+
`ChangeHat`で`v-bind:src="imagehat"`を`HatItemimage`に変更できるかなと思ったのですが、なかなかうまくいきませんでした。
|
|
240
|
+
|
|
241
|
+
|
|
242
|
+
|
|
238
|
-
|
|
243
|
+
親子コンポーネントファイル(親と子分けていないすべて同一vueファイル)で`ClickedHat: function(HatItemimage)`とあったので
|
|
244
|
+
|
|
239
|
-
|
|
245
|
+
親と子分けた際の子コンポーネントの方にも`ClickedHat: function(HatItemimage)`と書いてみたのですが、
|
|
246
|
+
|
|
240
|
-
|
|
247
|
+
この方法のほかにも`ClickedHat(HatItemimage): function(HatItemimage)`や`ClickedHat(HatItemimage): function()`など書いてみたのですが
|
|
248
|
+
|
|
249
|
+
この子コンポーネントで作成された各画像を表す`HatItemimage`をどう使うのかが分からなくなってしまい…
|
|
250
|
+
|
|
251
|
+
|
|
252
|
+
|
|
253
|
+
そもそもmethod内で使いことが違うのだろうかと思い始め、
|
|
254
|
+
|
|
255
|
+
子や親コンポーネントのmethods内にてevent(){}で囲んでも見ましたが、うまくいかず…
|
|
256
|
+
|
|
257
|
+
|
|
258
|
+
|
|
259
|
+
---
|
|
260
|
+
|
|
261
|
+
|
|
262
|
+
|
|
241
|
-
ちなみに、親子コンポーネント合わせて一つのvueファイルに
|
|
263
|
+
ちなみに、親子コンポーネント合わせて一つのvueファイルにまとめたら、
|
|
242
|
-
|
|
264
|
+
|
|
243
|
-
問題なく子コンポーネントの画像のクリックと同時に親コンポーネントの画像も変更されました。
|
|
265
|
+
問題なく子コンポーネントの画像のクリックと同時に親コンポーネントの画像も変更され、こちらの希望通りに動きました。
|
|
244
266
|
|
|
245
267
|
このようなコードになっています。
|
|
246
268
|
|
2
書式の改善
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -384,6 +384,8 @@
|
|
|
384
384
|
|
|
385
385
|
また、実行時のスクリーンショットが以下になります。
|
|
386
386
|
|
|
387
|
+
左サイドの各々の帽子の画像をクリックしたときに中央に表示される形となっております。
|
|
388
|
+
|
|
387
389
|
|
|
388
390
|
|
|
389
391
|
親コンポーネントと子コンポーネントに分けてもこのようになるのが理想像です。
|
1
記述忘れの入力
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
|
|
17
17
|
ディレクトリは以下のような感じになっています。
|
|
18
18
|
|
|
19
|
-
(App2.vue と hat.vue 以外のファイルは本質問と関係ないので無視してかまわないです )
|
|
19
|
+
(App2.vue と hat.vue とassets/hat内の画像以外のファイルは本質問と関係ないので無視してかまわないです )
|
|
20
20
|
|
|
21
21
|
|
|
22
22
|
|