前提・実現したいこと
こんにちは、
タイトルの通り、子コンポーネントにてv-forで表示された各々の画像のクリックと同時に親コンポーネントの画像も変化させたいのですが、
画像より、子コンポーネントにてv-forで作成された各画像をクリックしたときに親コンポーネントに変化がないのと、
子コンポーネントにてv-forで作成された各画像を親コンポーネントに受け渡す解決策が見つからず、ここにて質問させていただきました。
ディレクトリは以下のような感じになっています。
(App2.vue と hat.vue とassets/hat内の画像以外のファイルは本質問と関係ないので無視してかまわないです )
該当のコード
上から、親コンポーネント(App2.vue)と子コンポーネントファイル(hat.vue)です
(cssは割愛させていただきます)
vue
1<template> 2<div id="wrapper"> 3 <div id="app"> 4 <div> 5 <tabs> 6 <tab id="tab1" name="Tab1"> 7 <HatParts/> 8 </tab> 9 </tabs> 10 </div> 11 </div> 12 13 <div id="main"> 14 <div id="avatar"> 15 <img v-bind:src="imagehat" @ClickHat="ChangeHat" id="hat"> 16 </div> 17 18 <!--button--> 19 <div class="button-area"> 20 <button @click="checked">初期値</button> 21 <button @click="deleted">リセット</button> 22 </div> 23 </div> 24</div> 25</template> 26 27<script> 28import HatParts from './components/parts/hat.vue' 29 30export default { 31 data(){ 32 return{ 33 imagehat: require("../src/assets/hat/1.png") 34 } 35 }, 36 components:{ 37 HatParts 38 }, 39 40 methods: { 41 //初期値 42 checked: function(){ 43 this.imagehat = require('../src/assets/hat/3.png') 44 }, 45 46 //リセット 47 deleted: function(){ 48 this.imagehat = '' 49 }, 50 51 //帽子を変更 52 ChangeHat: function(imagehat){ 53 this.imagehat = HatItemimage 54 } 55 } 56} 57</script>
vue
1<template> 2 <div> 3 <div class="item"> 4 <ul> 5 <li v-for="HatItem in hat" :key="HatItem.id"> 6 <img v-bind:src="HatItem.image" 7 @click="ClickedHat(HatItem.image)"> 8 </li> 9 </ul> 10 </div> 11 </div> 12</template> 13 14<script> 15export default { 16 data(){ 17 return{ 18 hat:[ 19 {id: 1, image: require('../../assets/hat/1.png')}, 20 {id: 2, image: require('../../assets/hat/2.png')}, 21 {id: 3, image: require('../../assets/hat/3.png')} 22 ] 23 } 24 }, 25 //methods 26 methods: { 27 //帽子をクリックしたとき 28 ClickedHat: function(){ 29 this.$emit('ClickHat'); 30 }, 31 32 } 33} 34</script>
試してみたこと
上記の該当のコードより、子コンポーネントから親コンポーネントにデータを渡すときに$emit
を使うとのことだったので、
子コンポーネントより
@click="ClickedHat(HatItem.image)"
methodsでClickedHat
イベントを作り、親コンポーネントに'ClickHat'
を渡し、
親コンポーネントで@ClickHat
として受け取り、ChangeHat
メソッドを起動させ
ChangeHat
でv-bind:src="imagehat"
をHatItemimage
に変更できるかなと思ったのですが、なかなかうまくいきませんでした。
親子コンポーネントファイル(親と子分けていないすべて同一vueファイル)でClickedHat: function(HatItemimage)
とあったので
親と子分けた際の子コンポーネントの方にもClickedHat: function(HatItemimage)
と書いてみたのですが、
この方法のほかにもClickedHat(HatItemimage): function(HatItemimage)
やClickedHat(HatItemimage): function()
など書いてみたのですが
この子コンポーネントで作成された各画像を表すHatItemimage
をどう使うのかが分からなくなってしまい…
そもそもmethod内で使いことが違うのだろうかと思い始め、
子や親コンポーネントのmethods内にてevent(){}で囲んでも見ましたが、うまくいかず…
ちなみに、親子コンポーネント合わせて一つのvueファイルにまとめたら、
問題なく子コンポーネントの画像のクリックと同時に親コンポーネントの画像も変更され、こちらの希望通りに動きました。
このようなコードになっています。
vue
1<template> 2<div id="wrapper"> 3 <div id="app"> 4 <div> 5 <tabs> 6 <tab id="tab1" name="Tab1"> 7 <ul> 8 <li v-for="HatItem in hat" :key="HatItem.id"> 9 <img v-bind:src="HatItem.image" @click="ClickedHat(HatItem.image)"> 10 </li> 11 </ul> 12 </tab> 13 </tabs> 14 </div> 15 </div> 16 17 <div id="main"> 18 <div id="avatar"> 19 <img v-bind:src="imagehat" id="hat"> 20 </div> 21 22 <!--button--> 23 <div class="button-area"> 24 <button @click="checked">初期値</button> 25 <button @click="deleted">リセット</button> 26 </div> 27 </div> 28</div> 29 30</template> 31 32<script> 33export default { 34 35 data(){ 36 return{ 37 imagehat: require("../src/assets/hat/1.png"), 38 39 hat:[ 40 {id: 1, image: require('../src/assets/hat/1.png')}, 41 {id: 2, image: require('../src/assets/hat/2.png')}, 42 {id: 3, image: require('../src/assets/hat/3.png')} 43 ] 44 } 45 }, 46 47 methods: { 48 //初期値 49 checked: function(){ 50 this.imagehat = require('../src/assets/hat/3.png') 51 }, 52 53 //リセット 54 deleted: function(){ 55 this.imagehat = '' 56 }, 57 58 //帽子をクリックしたとき 59 ClickedHat: function(HatItemimage){ 60 this.imagehat = HatItemimage 61 } 62 63 } 64} 65</script>
また、実行時のスクリーンショットが以下になります。
左サイドの各々の帽子の画像をクリックしたときに中央に表示される形となっております。
親コンポーネントと子コンポーネントに分けてもこのようになるのが理想像です。
(ちなみに、質問とは関係ないのですが親コンポーネント子コンポーネント分けても分けなくても画像にある「初期値」「リセット」ボタンの部分は問題なく動いています)
どなたか案を提示してくださる方がいらっしゃったら、よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2019/07/03 06:32
2019/07/03 06:33