如何計算json對象數組中的值？ （在VueJS）

Question

我想總結一個對象中的幾個屬性。 我正在使用VueJS過濾器，並結合使用ES5 reduce函數來合計數字以獲得總數。

嗯，這不是在這個時候工作。有人關心幫助我嗎？

new Vue({ 
 
    el: '.app', 
 
    data: { 
 
    products: [{ 
 
     "pid": "37", 
 
     "pname": "Reprehenderit", 
 
     "price": "4.29", 
 
     "amount": "1" 
 
    }, { 
 
     "pid": "45", 
 
     "pname": "Sit", 
 
     "price": "1.00", 
 
     "amount": "4" 
 
    }, { 
 
     "pid": "67", 
 
     "pname": "Omnis", 
 
     "price": "7.00", 
 
     "amount": "2" 
 
    }], 
 
    } 
 
}); 
 

 
Vue.filter('subtotal', function (list, key1, key2) { 
 
    return list.reduce(function(total, item) { 
 
     return total + item.key1 * item.key2 
 
    }, 0) 
 
})

<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.11/vue.min.js"></script> 
 

 
<div class="app"> 
 
    
 
    Product example: {{ products[0].pname }} 
 
    
 
    <br><br> 
 
    
 
    Total: {{ products | subtotal 'price' 'amount' }} 
 

 
</div>

Answer 1

貌似後VUE已經構成正在初始化事件處理程序。如果您的事件在被調用時未附加，他們將被忽略。

而且，你不能引用您的對象屬性一樣，product.variable你需要使用product[variable]

Vue.filter('subtotal', function (list, key1, key2) { 
 
    return list.reduce(function(total, item) { 
 
     return total + item[key1] * item[key2] 
 
    }, 0) 
 
}) 
 

 
new Vue({ 
 
    el: '.app', 
 
    data: { 
 
    products: [{ 
 
     "pid": "37", 
 
     "pname": "Reprehenderit", 
 
     "price": "4.29", 
 
     "amount": "1" 
 
    }, { 
 
     "pid": "45", 
 
     "pname": "Sit", 
 
     "price": "1.00", 
 
     "amount": "4" 
 
    }, { 
 
     "pid": "67", 
 
     "pname": "Omnis", 
 
     "price": "7.00", 
 
     "amount": "2" 
 
    }], 
 
    } 
 
});

<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.11/vue.min.js"></script> 
 

 
<div class="app"> 
 
    
 
    Product example: {{ products[0].pname }} 
 
    
 
    <br><br> 
 
    
 
    Total: {{ products | subtotal 'price' 'amount' }} 
 

 
</div>

Answer 2

你可以得到鍵的值是這樣的：

return total + item[key1] * item[key2] 

另外，您應該在vue實例之前設置過濾器。