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

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

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

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

Q&A

解決済

2回答

438閲覧

Vue.jsにおいて、親コンポーネントの値を動的に子コンポーネントにわたす方法を教えて下さい

kss

総合スコア9

Vue.js

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

0グッド

1クリップ

投稿2023/01/27 07:52

編集2023/01/27 08:08

前提

Vue.jsにおいて、親コンポーネントの値を動的に子コンポーネントにわたす方法を教えて下さい

実現したいこと

2つの子コンポーネントのいいねの数を親コンポーネントで受け取り、更に別の子コンポーネントで合計のいいね数を表示しています。
親コンポーネントで表示しているいいね数をリセットする機能を実装したいのですが、合計のいいね数を0にできても子コンポーネントのいいね数を0に出来ません。

該当のソースコード

App.vue

1import LikeNumber from './components/LikeNumber.vue' 2 3<template> 4 <div> 5 <LikeHeader :totalNumber="number"></LikeHeader> 6 <LikeNumber @total-increment="increment"></LikeNumber> 7 <LikeNumber @total-increment="increment"></LikeNumber> 8 <button @click="reset">reset</button> 9 </div> 10</template> 11<script> 12import LikeHeader from './components/LikeHeader.vue' 13export default { 14 data(){ 15 return{ 16 number:0 17 } 18 }, 19 methods:{ 20 increment(){ 21 this.number += 1 22 }, 23 reset(){ 24 this.number = 0 25 } 26 }, 27 components:{ 28 LikeHeader 29 } 30} 31</script> 32

LikeHeader.vue

1<template> 2 <div class="header"> 3 <p>Total Good</p> 4 <p>{{ showNum }}</p> 5 </div><!-- /.header --> 6</template> 7<script> 8export default { 9 props:{ 10 totalNumber:{ 11 type:Number, 12 default:10 13 } 14 }, 15 computed:{ 16 showNum(){ 17 return( 18 this.totalNumber 19 ) 20 } 21 22 } 23} 24</script>

LikeNumber.vue

1<template> 2 <div> 3 <p>Good({{ number }})</p> 4 <button @click="increment">+1</button> 5 </div> 6 </template> 7 <script> 8 export default{ 9 export default{ 10 props:{ 11 number:{ 12 type:Number, 13 default:0 14 } 15 }, 16 methods:{ 17 increment(){ 18 this.number += 1; 19 this.$emit('total-increment', this.number) 20 } 21 } 22 } 23 </script> 24

試したこと

LikeHeaderのnumberはApp.vueのnumberに応じて変化するにも関わらず、reset()で0に変えてもLikeNumberのnumが変わらない理由がわかりません。

よろしくお願い致します。

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

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

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

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

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

guest

回答2

0

ベストアンサー

LikeHeaderのnumberはApp.vueのnumberに応じて変化するにも関わらず、reset()で0に変えてもLikeNumberのnumが変わらない理由がわかりません。

  

LikeHeaderは親コンポーネントとpropsで紐づいているため動的に変わります。
LikeNumberもpropsで紐づければ同じ動きになると思います。

App.vue

1(略) 2 <LikeHeader :totalNumber="number"></LikeHeader> 3 <LikeNumber :totalNumber="number" @total-increment="increment"></LikeNumber> 4 <LikeNumber :totalNumber="number" @total-increment="increment"></LikeNumber> 5(略)

LikeNumber.vue

1<template> 2 <div> 3 <p>Good({{ totalNumber }})</p> 4 <button @click="increment">+1</button> 5 </div> 6</template> 7<script> 8export default { 9 props: { 10 totalNumber: { 11 type: Number, 12 default: 10 13 } 14 }, 15(略)

投稿2023/01/27 16:19

donkuri

総合スコア81

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

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

kss

2023/01/30 08:42

ご回答ありがとうございます。 とても参考になりました。LikeNumberもpropsに紐づける必要があったのですね。
guest

0

かなり無理矢理な実装ですが、とりあえず以下で動いてます

html

1<!-- https://teratail.com/questions/k9a3uom29j319c --> 2 3<template> 4 <div> 5 <LikeNumber :numbering="0"></LikeNumber> 6 <LikeNumber :numbering="1"></LikeNumber> 7 <button @click="reset">Parent reset</button> 8 <div> 9 number 10 {{ numbers[0] + numbers[1] }} 11 </div> 12 </div> 13</template> 14 15<script> 16import LikeNumber from '../components/LikeNumber.vue' 17 18export default { 19 data(){ 20 return{ 21 numbers: [0,0], 22 } 23 }, 24 methods:{ 25 reset(){ 26 this.numbers = [0,0] 27 } 28 }, 29 components:{ 30 LikeNumber 31 } 32} 33</script>

html

1<template> 2 <div> 3 <p>Good({{ $parent.numbers[this.numbering] }})</p> 4 <button @click="increment">+1</button> 5 </div> 6</template> 7<script> 8export default { 9 props: { 10 numbering: { 11 type: Number, 12 } 13 }, 14 methods: { 15 increment() { 16 this.$parent.numbers[this.numbering] += 1; 17 }, 18 } 19} 20</script>

投稿2023/01/27 09:53

編集2023/01/27 10:05
yuma.inaura

総合スコア1453

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

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

kss

2023/01/30 08:42

ご回答ありがとうございます。 とても参考になりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問