如何计算 json 对象数组中的值? (在 VueJS 中)
How to count values in an json object array? (In VueJS)
我正在尝试总结一个对象的几个属性。
我正在使用 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>
看起来您的事件处理程序正在 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>
你可以这样获取key的值:
return total + item[key1] * item[key2]
另外,你应该在vue实例之前设置过滤器。
我正在尝试总结一个对象的几个属性。 我正在使用 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>
看起来您的事件处理程序正在 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>
你可以这样获取key的值:
return total + item[key1] * item[key2]
另外,你应该在vue实例之前设置过滤器。