v-for在VueJS中,如何跟踪以前的组件数据?

问题描述 投票:1回答:1

我想输出一系列包含值的条目。

但是对于每一行,我想显示从开始到当前行的所有值的总和。

例如:

// 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事件会导致无限循环。

我如何逐步累计每个项目值?

vuejs2
1个回答
1
投票

使用计算属性为您保留计数:

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次,并且值被缓存

© www.soinside.com 2019 - 2024. All rights reserved.