vue對(duì)象怎么逆向求和然后添加屬性？

給定一個(gè)三層的動(dòng)態(tài)數(shù)據(jù)，形式大概如下

[
    {
        name: '1',
        level: 1,
        children: [
            {
                name: '1-1',
                level: 2,
                children: [
                    {
                        name: '1-1-1',
                        level: 3,
                        value: 12
                    },
                    {
                        name: '1-1-2',
                        level: 3,
                        value: 24
                    }
                ]
            },
            {
                name: '1-2',
                level: 2,
                children: [
                    {
                        name: '1-2-1',
                        level: 3,
                        value: 122
                    },
                    {
                        name: '1-2-2',
                        level: 3,
                        value: 2
                    }
                ]
            }
        ]
    }
]

現(xiàn)在要根據(jù)第三層各對(duì)象的value求和，動(dòng)態(tài)添加第二層對(duì)象屬性value為對(duì)應(yīng)第三層之和，以此類推至第一層，該怎么做？要使第三層數(shù)據(jù)變化時(shí)上兩層也會(huì)隨之變化

回答

編輯回答

悶騷型

在data當(dāng)前數(shù)據(jù)對(duì)象下設(shè)置value計(jì)算下一級(jí)的value總和我沒(méi)有找到方法，不過(guò)可以在computed里面進(jìn)行計(jì)算。
https://segmentfault.com/q/10...

<div class="crtData">
    <p>{{mainData.value}}</p>
    <p>{{secondLevel_1.value}}</p>
    <p>{{secondLevel_2.value}}</p>
    <input type="number" v-model="data_1">
    <input type="number" v-model="data_2">
    <input type="number" v-model="data_3">
    <input type="number" v-model="data_4">
</div>

function plusData(data){
    if (!data) return 0;
    var res = 0;
    for (var i = 0; i < data.length; i++) {
        res = res + data[i].value;
    }
    return res;
}
function crteData(name,level,data,value){
    var dataDemo = new Object;
    dataDemo.name = name;
    dataDemo.level = level;
    dataDemo.data = data;
    dataDemo.value = dataDemo.data?plusData(dataDemo.data):value;
    return dataDemo;
}
var crtData = new Vue({
    el: '.crtData',
    data: {
        data_1: 10,
        data_2: 11,
        data_3: 12,
        data_4: 13
    },
    computed: {
        t_thirdLevel_2: function(){
            return crteData('t_thirdLevel_2',3,null,Number(this.data_1))
        },
        t_thirdLevel_1: function(){
            return crteData('t_thirdLevel_1',3,null,Number(this.data_2))
        },
        secondLevel_2: function(){
            return crteData('secondLevel_2',2,[this.t_thirdLevel_1,this.t_thirdLevel_2],null)
        },
        o_thirdLevel_2: function(){
            return crteData('o_thirdLevel_2',3,null,Number(this.data_3))
        },
        o_thirdLevel_1: function(){
            return crteData('o_thirdLevel_1',3,null,Number(this.data_4))
        },
        secondLevel_1: function(){
            return crteData('secondLevel_2',2,[this.o_thirdLevel_1,this.o_thirdLevel_2],null)
        },
        mainData: function(){
            return crteData('mainData',1,[this.secondLevel_1,this.secondLevel_2],null)
        }
    }
})

2017年7月6日 01:18

編輯回答

荒城

如果只是一次性把值全部算出來(lái)的話, 遞歸就能解決

let a = 你上面的那個(gè)數(shù)組

console.log(f(a))

function f(arr){
    if(!arr){
        return 0
    }
    let sum = 0
    for(let i = 0; i < arr.length; i++){
        let t = arr[i]
        let value = t.value?t.value:f(t.children)
        sum += value
    }
    return sum
}

2018年5月8日 08:21

編輯回答

深記你

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
</head>

<body>
    <div id="app">
        <com1 v-for="item in list" :item="item"></com1>
    </div>

    <template id="com1">
        <div>
            <p>{{ sum }}</p>
            <ul v-if="item.children">
                <li v-for="c in item.children">
                    <com1 :item="c"></com1>
                </li>
            </ul>
            <div v-else>
                <input type="number" v-model.number="item.value">
            </div>
        </div>
    </template>

    <script src="http://cdn.bootcss.com/vue/2.1.6/vue.min.js"></script>

    <script>
        const list = [{
            name: '1',
            level: 1,
            children: [{
                    name: '1-1',
                    level: 2,
                    children: [{
                            name: '1-1-1',
                            level: 3,
                            value: 12
                        },
                        {
                            name: '1-1-2',
                            level: 3,
                            value: 24
                        }
                    ]
                },
                {
                    name: '1-2',
                    level: 2,
                    children: [{
                            name: '1-2-1',
                            level: 3,
                            value: 122
                        },
                        {
                            name: '1-2-2',
                            level: 3,
                            value: 2
                        }
                    ]
                }
            ]
        }]

        function GetSum(item) {
            const list = item.children
            if (Array.isArray(list)) {
                return list.map(t => GetSum(t)).reduce((a, b) => a + b, 0)
            }
            return item.value || 0
        }

        Vue.component('com1', {
            template: '#com1',
            props: ['item'],
            computed: {
                sum() {
                    return GetSum(this.item)
                }
            }
        })

        new Vue({
            el: '#app',
            data() {
                return {
                    list
                }
            }
        })
    </script>
</body>

</html>

2017年11月12日 01:16