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

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

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

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

6997閲覧

vue.js emitでのメソッドの処理がうまくいかない

ink88882

総合スコア24

Vue.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2019/05/28 14:19

vue.jsで、コンポーネントを使いクリックすることでdata内の金額を追加するような処理を試したいです。
そのためにインスタンス内のメソッドでまずは値がうまく出てくるか、console.logしているのですがうまく処理できません。

html

1<section class="service__catering" id="vue-price"> 2 <all-price 3 v-for="post in posts" 4 v-on:emit-price="priceplus()" <!--emitで関数を実行しています。--> 5 v-bind:key="post.id" 6 v-bind:post="post" 7 ></all-price> 8 </section> 9

javascript

1Vue.component('all-price',{ 2 props:['post'], 3 template:` 4 <div class="price-post"> 5 <p>値段:{{post.price}}</p> 6 <button v-on:click="$emit('emit-price')"> 7 値段が大きくなる 8 </button> 9 </div>` 10}) 11 12 13new Vue({ 14 el: '#vue-price', 15 data:{ 16 allprice:100, 17 posts:[ 18 { 19 id:1, 20 price:100, 21 }, 22 { 23 id:2, 24 price:200, 25 } 26 ]}, 27 methods:{ 28 priceplus(){ 29 console.log(this.allprice); 30 console.log(this.price); 31 } 32 } 33 }) 34

上記の設定で、下記のような表示となります。

![イメージ説明]

値段が大きくなる、をクリックすると、
最後のmethods内のconsole.logで、this.allpriceではきちんと100が出力されますが、
その次の行のthis.priceでクリックした側の金額(100もしくは200)を出力したいですが、うまくいきません。
(undefinedになります)
this.posts.priceやthis.post.priceでも出力されません。

まずは出力される数字を正しく確認してから、methods内で数字を計算したいのですが、
その前段階の出力される数字がうまく捉えられていません。

何卒よろしくお願いいたします。

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

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

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

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

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

guest

回答2

0

priceplus(post)のようにpostを渡さないと、どのpostのボタンが押されたのかpriceplusメソッド内から判断の付けようがなく値を取れません。

v-on:emit-price="priceplus(post)"

js

1 methods: { 2 priceplus(post) { 3 console.log(this.allprice); 4 console.log(post.price); 5 } 6 }

投稿2019/05/28 18:47

yhg

総合スコア2161

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

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

ink88882

2019/05/30 13:39

コードの提示、ありがとうございます!!記載いただいた内容で上手くいきました!
guest

0

ベストアンサー

js

1 v-bind:key="post.id" 2 v-bind:post="post"

こういうbindをする場合は、子コンポーネントのpropsが定義されていないと渡せないはずです。

Vue.jsのpropsに関するドキュメントを参照してみてください。


コンポーネントの親子関係がはっきり区別できてない感じですね。
all-priceが子で、vue-priceが親です。

htmlの方では親のpostsから、postという名前で子のall-priceに値をbindしていて、今回の場合all-priceは2つあります。

親がposts, 2ついるall-priceがpostという値を持っている状態なので、親の方からはpostは見えていません。
posts[0]と1つめのall-price.post、ports[1]と2つめのall-price.postがバインドされた状態です。

ふつうだと$emitの第二引数でpostを渡すシーンだと思います。

投稿2019/05/28 14:52

編集2019/05/28 22:32
otolab

総合スコア763

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

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

ink88882

2019/05/28 16:25

コメントありがとうございます。 https://jp.vuejs.org/v2/guide/components-props.html など読み込んで見ているのですが、 >子コンポーネントのpropsが定義されていないと渡せない に関する記述が見つからず。。見落としかとは思うのですが、このbindの仕方の2通りがまずいのでしょうか。
otolab

2019/05/28 22:27

あ、ごめんなさい。寝ぼけてた。propsは不要です。
ink88882

2019/05/30 13:40

詳細の説明、ありがとうございます! 下記のコードでうまくいきました! methods:{ priceplus(post){ console.log(this.allprice); console.log(post.price); } <section class="service__price__culc" id="vue-price"> <all-price v-for="post in posts" v-on:emit-price="priceplus(post)" v-bind:key="post.id" v-bind:post="post" ></all-price> <h2>合計金額:{{allprice}}</h2> </section>
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問