Vuejs/javascriptで、以下の点を入力してください：

Question

私はVuejsを使用して簡単なカートを構築しています。 カート内の合計を計算する際に問題があります。 価格を一緒に追加するのではなく、価格10と15でカートに2つのアイテムがある場合は、回答が「25」になるように「1015」と表示されます。

カート.Vue

それでも

<template> 
<div class="container"> 
    <h1>Your Cart</h1> 
    <div class="center" v-for="item in shoppingCart"> 
    <div class="col-md-8 cart-item"> 
     <div class="row"> 
     <div class="item-img pull-left"> 
      <img class="media-object" v-bind:src="item.thumbnailUrl"> 
     </div> 
     <div class="item-info pull-right"> 
      <h5>{{item.title}}</h5> 
      <h5>{{item.price}}</h5> 
      <button class="btn btn-danger" v-on:click="removeFromCart(item.id)">Remove From Cart</button> 
     </div> 
     </div> 
    </div> 
    </div> 
    <div class="total"> 
    <h3> Total : &euro;{{total}} </h3> 
    </div> 
</div> 
</template> 

<script> 
    export default { 
    name: 'Cart', 
    props: ['shoppingCart'], 
    data() { 
    return { 
    } 
    }, 
    computed: { 
    total() { 
     return this.shoppingCart.reduce((acc, item) => acc + item.price, 0); 
    } 
    }, 
    methods: { 
    removeFromCart: function(productId) { 
     console.log('remove product from cart', productId); 
     this.$emit('removeFromCart', productId); 
    } 
    } 
    } 
</script> 

Sample of what it looks like on the web

ごくVuejsに新しいので、任意のフィードバックは素晴らしいことだ、ありがとう！

Answer 1

実行しているのは、数値を追加する代わりに文字列を追加することです。あなたの例では、 "acc"および/または "item.price"は実際には文字列値です。文字列 "15"に文字列 "10"を追加すると、正しい "1015"が得られます。最初の数字に変換してみてください。このような

何かが動作します：acc += parseFloat(item.price)、またはacc += Number(item.price)：acc += (item.price * 1)

が、「正しい」解決策は、おそらくこのようなものになるだろう。

converting a string to a numberを参照してください。