我想输出一系列包含值的条目。
但是对于每一行,我想显示从开始到当前行的所有值的总和。
例如:
// App.vue
<template>
<div>
<Row v-for="item in items" :value="item.value"/>
</div>
</template>
<script>
export default {
data() {
items: [{ value: 3}, {value: 5}, {value: 1}, {value: 9}, {value: 3}]
}
}
</script>
// Row.vue
<template>
<div>{{ value }} (Sum: <subtotal here>)</div>
</template>
<script>
export default {
props: ['value']
}
</script>
我想要这个输出:
<div>
<div>3 (Sum: 3)</div>
<div>5 (Sum: 8)</div>
<div>1 (Sum: 9)</div>
<div>9 (Sum: 18)</div>
<div>3 (Sum: 21)</div>
</div>
我已经尝试了多种方式,使用Row
中的局部变量在App
创建/更新上发出事件...
使用本地非反应性变量会在更新组件时导致错误行为。使用prop ou事件会导致无限循环。
我如何逐步累计每个项目值?
使用计算属性为您保留计数:
new Vue({
el: '#app',
template: '#template',
data: {
items: [{ value: 3}, {value: 5}, {value: 1}, {value: 9}, {value: 3}]
},
computed: {
calculatedItems() {
const newArray = [];
let sum = 0;
for(let i = 0; i < this.items.length; i++) {
sum += this.items[i].value;
newArray.push({
total: sum,
item: this.items[i],
});
}
return newArray;
},
},
})
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app"></div>
<template id="template">
<div>
<div v-for="item in calculatedItems">
{{ item.item.value }},
Total: {{ item.total }}
</div>
</template>
这基本上是列表的副本,并计算每个条目的总值,这也是为每个项目循环计算值的更多,因为这只循环1次,并且值被缓存