VueでTypeScriptやJavaScriptのメソッド結果をreturnしたい

Question

後述するサンプルデータに対して、下記のような出力結果を得たいと思っています。

・3
・1

サンプルデータ↓

export const dummyData = [
    {
        id: "1",
        name: "a",
        sub: [
            {
                id: "1#1",
                name: "b",
                sub_sub: [
                    { id: "1#1#1", name: "b-a" },
                    { id: "1#1#2", name: "b-b" },
                ]
            },
            {
                id: "1#2",
                name: "c",
                sub_sub: [
                    { id: "1#2#1", name: "c-a" },
                ]
            },
        ]
    },
    {
        id: "2",
        name: "d",
        sub: [
            {
                id: "2#1",
                name: "e",
                sub_sub: [
                    { id: "1#2#1", name: "e-a" },
                ]
            }
        ]
    },
]

何がやりたいのかというと、オブジェクト"a"と"d"に含まれるsub_subの総数をカウントし、
それを結果として出力したいと思っており、それが上記outputです。

これを実行するコードとして下記のようにVue.jsを用いて作成してみました。

<template>
  <div>
    <ul>
        <li v-for="item in items" :key="item.i">{{rowSpanCalc(item.id)}}</li>
    </ul>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
import { dummyData } from '~/store/dummy'

@Component({})
export default class extends Vue {
  items: any = []

  created() {
    this.items = dummyData
  }

  rowSpanCalc(item: any) {
    const count = item.sub.reduce(
      (total: any, curr: any) => total + curr.sub_sub.length,
      0
    )
    return count;
  }
}
</script>

しかし、このコードを実行しても想定している結果を得ることができず、
下記のようなエラーメッセージがコンソール上に表示されている状態です。

　 item.sub.reduce is not a function

どうやらメソッドのrowspanCalcの部分がうまくいってないようなのです。
どうしたら、コードを実行できるのかどなたかご教示いただけませんでしょうか？

Answer 1

rowspanCalcの引数がitemを想定しているのに、渡す側でitem.idを渡しているため、
item.subがundefinedとなり、undefinedにはreduceというメソッドはないので、reduceもundefined、つまりnot a functionとなっています。
itemを渡すようにしましょう