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" and/or "item.price" 实际上是字符串值。当您将字符串“10”添加到字符串“15”时，您将得到“1015”，这是正确的。先尝试将它们转换为数字：

像这样的东西会起作用：acc += (item.price * 1)

不过，"correct" 解决方案可能是这样的：acc += parseFloat(item.price)，或 acc += Number(item.price)。

见converting a string to a number。

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

Vuejs/javascript calculate items in cart

javascript

vue.js

vuejs2

calculation