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

您遇到的是字符串添加而不是数字添加。在您的示例中，＆＃34; acc＆＃34;和/或＆＃34; item.price＆＃34;实际上是字符串值。当你添加字符串＆＃34; 10＆＃34;对于字符串＆＃34; 15＆＃34;，你得到＆＃34; 1015＆＃34;，这是正确的。首先尝试将它们转换为数字：

这样的事情可行：acc += (item.price * 1)

虽然，＆＃34;正确＆＃34;解决方案可能是这样的：acc += parseFloat(item.price)或acc += Number(item.price)。

请参阅converting a string to a number。

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

1 个答案: