2016-10-03 127 views
0

我最近開始與vuejs和想法是用它做一個POS系統。所以目前我有一系列的產品,並顯示他們等,所有的作品都很好。現在我的問題是試圖計算所有產品的小計價格(沒有增值稅的價格)。VUE過濾器通過陣列

所以這是我目前有:

<div class="col-md-12 productsList"> 
      <div class="product" v-for="product in products"> 
       <p> 
        <span class="col-md-4">@{{ product.name }}</span> 
        <span class="col-md-3 col-md-offset-1">@{{ product.amount }}</span> 
        <span class="col-md-3 col-md-offset-1" v-text="(parseFloat(product.price) * product.amount) | float"></span> 
       </p> 
      </div> 
     </div> 

<script> 

new Vue({ 
    el: '.container-custom', 

    data: { 
     products: [] 
    }, 

    ready: function() { 
     var self = this; 
    }, 

    methods: { 

     fetchSingleProduct: function(productId) { 

      this.$http.get('get/products/'+productId).then((product) => { 

       var existingProducts = this.products.filter(function (item) { return (item.id == product.data.id)}); 

       if (existingProducts.length) { 
        existingProducts[0].amount += 1; 
       } else { 
        product.data.amount = 1; 
        this.products.push(product.data); 
       } 
      }); 

     }, 

    }, 

    filters: { 
     float: function (value) { 
      return value.toFixed(2); 
     } 
    } 
}); 

每個產品成立: 名稱,數量,價格,增值稅

每個產品的增值稅可以是不同的太(部分產品有6%,一些21%)等。我如何用vue完成這樣的事情?

回答

1

只需添加你需要總結成數組,然後創建一個計算的屬性,返回數組或者array.reduce或簡單for loop的總和所有產品...