javascript - Vuejs/javascript 计算购物车中的商品

Question

我正在使用 Vuejs 构建一个简单的购物车。我无法计算购物车中的总数。它似乎不是将价格加在一起，而是将数字显示在一起，就像我购物车中有两件商品，价格分别为 10 和 15，它会显示“1015”，而答案应该是“25”

Cart.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”实际上是字符串值。将字符串“10”添加到字符串“15”时，会得到“1015”，这是正确的。尝试先将它们转换为数字:

类似这样的东西可以工作:acc += (item.price * 1)

尽管如此，“正确”的解决方案可能是这样的:acc += parseFloat(item.price)，或acc += Number(item.price).

参见converting a string to a number .