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内で数字を計算したいのですが、
その前段階の出力される数字がうまく捉えられていません。
何卒よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/30 13:39