Как подсчитать значения в массиве объектов json? (В VueJS)

Question

Я пытаюсь подытожить пару свойств в объекте. Я использую VueJS-фильтр, в сочетании с функцией уменьшения ES5, чтобы добавить числа, чтобы получить общее количество.

Ну, в данный момент он не работает. Кто-то хочет помочь мне?

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

Похоже, ваш обработчик события инициализации после ви уже построена. Если ваши события не привязаны, когда их вызывают, они будут проигнорированы.

Кроме того, вы не можете ссылаться на свои свойства объекта, как этот 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.