vue项目中,数组的拼接与计算,目前这个怎么也弄不出来...

Question

已知数据结构为

list: [
    0: {
        ...,
        status: 0,
        group: 0
    },
    1: {
        ...,
        status: 0,
        group: 0
    },
    2: {
        ...,
        status: 1,
        group: 0
    },
    3: {
        ...,
        status: 1,
        group: 0
    },
    4: {
        ...,
        status: 0,
        group: 1
    },
    5: {
        ...,
        status: 0,
        group: 1
    }
    6: {
        ...,
        status: 0,
        group: 1
    }
    7: {
        ...,
        status: 1,
        group: 1
    },
    8: {
        ...,
        status: 0,
        group: 2
    },
    9: {
        ...,
        status: 2,
        group: 2
    },
    10: {
        ...,
        status: 1,
        group: 2
    }
] 

HTML结构

<div v-for="(item, index) in list" :key="index">
    <div v-for="data in item" :key="data.id">{{data.id}}</div>
    <div>
        <div>等于0的有: ? 个</div>
        <div>等于1的有: ? 个</div>
        <div>等于2的有: ? 个</div>
    <div>
</div>

if (res.list.length > 0) {
    res.list.map((item, index) => {
        let id = item.group
        if (!Array.isArray(pop[id])) {
            pop[id] = []
            status[id] = []
        }
        pop[id].push(item)
        status[id].push(item.statusId)
    })
}

要求:
安装group分组,在div中循环.
算出,每组的status分别有几个,
比如,在组1中,等于1的有3个,等于0的有1个,等于2的有0个.

分组什么的都弄好了,现在就卡在算出每组的status了,请教各位,这个怎么算啊~~
新的数组格式如下图:

用@夕水的解决方法的结果:

@asseek

Answer 1

用计算属性

<div v-for="(item, index) in list" :key="index">
  <div v-for="data in item" :key="data.id">{{data.id}}</div>
  <div>
    <div>等于0的有: {{ counts[index].s0 }} 个</div>
    <div>等于1的有: {{ counts[index].s1 }} 个</div>
    <div>等于2的有: {{ counts[index].s2 }} 个</div>
  </div>
</div>

computed: {
  counts() {
    return this.list.map(arr =>
      arr.reduce((d, v) => {
        d[`s${v.status}`] += 1;
        return d;
      }, {s0: 0, s1: 0, s2: 0}),
    );
  },

Answer 2

没看懂这个数据结构

Answer 3

看数据结构，实际上是个二维数组，第一层数组，第二层多个数组，数组里就是对象呢。计算结果用计算属性合适:

<div v-for="(item, index) in list" :key="index">
  <div v-for="data in item" :key="data.id">{{data.status }}</div>
  <div>
    <div>等于0的有: {{ count.s0}} 个</div>
    <div>等于1的有: {{ count.s1}} 个</div>
    <div>等于2的有: {{ count.s2}} 个</div>
  </div>
</div>

js代码:

 computed:{
        count(){
                 return this.list.reduce((t, c) => {
                    return c.reduce((d, v) => {
                        d[`s${v.status}`] += 1;
                        return d;
                    }, { s0: 0, s1: 0, s2: 0 })
                });
        }
  },