質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Q&A

解決済

1回答

1053閲覧

子コンポーネントにてv-forで作成された各々の画像のクリックと同時に親コンポーネントの画像も変化させたい

退会済みユーザー

退会済みユーザー

総合スコア0

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

0グッド

0クリップ

投稿2019/07/03 02:08

編集2019/07/03 06:19

前提・実現したいこと

こんにちは、
タイトルの通り、子コンポーネントにて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メソッドを起動させ
ChangeHatv-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>

また、実行時のスクリーンショットが以下になります。
左サイドの各々の帽子の画像をクリックしたときに中央に表示される形となっております。
イメージ説明
親コンポーネントと子コンポーネントに分けてもこのようになるのが理想像です。
(ちなみに、質問とは関係ないのですが親コンポーネント子コンポーネント分けても分けなくても画像にある「初期値」「リセット」ボタンの部分は問題なく動いています)

どなたか案を提示してくださる方がいらっしゃったら、よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

親コンポーネント

vue

1<HatParts v-on:clickHat="ChangeHat"></HatParts> 2 3methods: { 4 ChangeHat: function(img) { 5 this.imagehat = img 6}

子コンポーネント

vue

1methods: { 2 //帽子をクリックしたとき 3 ClickedHat: function(img){ 4 this.$emit('clickHat',img); 5 }, 6 7 }

投稿2019/07/03 06:27

LanHma

総合スコア192

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/07/03 06:32

只今、提示してくださったプログラムにて無事に画像を表示させることができました。 迅速に回答してくださり大変感謝しております。ありがとうございました。
LanHma

2019/07/03 06:33

良かったです!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問