How do vue objects reverse sum and then add properties?
given a three-tier dynamic data, the form is roughly as follows
[
{
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
}
]
}
]
}
]
now according to the value summation of the objects in the third layer, dynamically add the second layer object attribute value to the sum of the third layer, and so on to the first layer, what should I do? To make the data of the third layer change, the upper two layers will also change with it
if you only calculate all the values at once, recursion can solve
let a =
console.log(f(a))
function f(arr){
if(!arr){
return 0
}
let sum = 0
for(let i = 0; i < arr.length; iPP){
let t = arr[i]
let value = t.value?t.value:f(t.children)
sum += value
}
return sum
}
I can't find a way to set value to calculate the sum of value at the next level under the current data object of data, but I can calculate it in computed.
https://codeshelper.com/q/10.
<div class="crtData">
{{mainData.value}}
{{secondLevel_1.value}}
{{secondLevel_2.value}}
<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; iPP) {
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)
}
}
})
<!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>
{{ sum }}
<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: '-sharpcom1',
props: ['item'],
computed: {
sum() {
return GetSum(this.item)
}
}
})
new Vue({
el: '-sharpapp',
data() {
return {
list
}
}
})
</script>
</body>
</html>
