vuejsを使用してrowspanを動的に表現して表を作成したい。

Question

下記のような表をVue.jsとUIフレームワークのVuetify.jsを使用して作成しなければなりません。
開発環境としてはNuxt.jsを使用しています。

この表のサンプルデータは下記のような形です。

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" },
                ]
            }
        ]
    },
]

表の一列目のrowspanは三列目のデータの数に依存して変更できるようにするために、
メソッドを作成し、:rowspanというかたちで、変数を動的に変更したいと思い
コードを下記のように作成しました。

<template>
  <div>
    <v-simple-table dense>
      <thead>
        <tr>
          <th class="blue lighten-5">name</th>
          <th class="blue lighten-5">sub_name</th>
          <th class="blue lighten-5">sub_sub_name</th>
        </tr>
      </thead>
      <tbody>
        <template v-for="item in items">
          <tr v-for="(subitem, iSub) in item.sub" :key="subitem.id">
            <td v-if="iSub === 0" :rowspan="rowSpanCalc(item)">
              {{ item.name }}
            </td>
            <template v-if="(sub_subitem, iSub_sub) in subitem.sub_sub">
              <td v-if="iSub_sub === 0" :rowspan="subitem.sub_sub.length">
                {{ subitem.name }}
              </td>
              <td :key="sub_subitem.id">{{ sub_subitem.name }}</td>
            </template>
          </tr>
        </template>
      </tbody>
    </v-simple-table>
  </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>
<style lang="scss" scoped>
table {
  border-collapse: collapse !important;
}
.v-data-table--dense > .v-data-table__wrapper > table > tbody > tr > td {
  border-bottom: thin solid rgba(0, 0, 0, 0.12) !important;
}
</style>

動的に変数を渡すことはできたのですが、画面の表示が下記のようになり、想定したのものと違う状況です。

現状エラーとして下記のようにコンソール上に出ております。

"Property or method "iSub_sub" is not defined on the instance but referenced during render."

解決が出来ず非常に困っております。
どなたかお力添えをいただけませんでしょうか？

Answer 1

下記のコードで問題なくできました。

<template>
  <div>
    <v-simple-table dense>
      <thead>
        <tr>
          <th class="blue lighten-5">name</th>
          <th class="blue lighten-5">sub_name</th>
          <th class="blue lighten-5">sub_sub_name</th>
        </tr>
      </thead>
      <tbody>
        <template v-for="item in items">
          <template v-for="(subitem, iSub) in item.sub">
          <tr v-for="(sub_subitem, iSub_sub) in subitem.sub_sub" :key="sub_subitem.id">
            <td v-if="iSub === 0 & iSub_sub === 0" :rowspan="rowSpanCalc(item)">
              {{ item.name }}
            </td>
            <td v-if="iSub_sub === 0" :rowspan="subitem.sub_sub.length">
              {{ subitem.name }}
            </td>
            <td>{{ sub_subitem.name }}</td>
          </tr>
          </template>
        </template>
      </tbody>
    </v-simple-table>
  </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
    )
    console.log(count);
    return count;
  }
}
</script>
<style lang="scss" scoped>
table {
  border-collapse: collapse !important;
}
.v-data-table--dense > .v-data-table__wrapper > table > tbody > tr > td {
  border-bottom: thin solid rgba(0, 0, 0, 0.12) !important;
}
</style>

Answer 2

<td :rowspan="item.sub.sub_sub.length">{{item.sub[0].name}}</td> というコードのitem.subに添え字が必要なのではないでしょうか？ 例えば item.sub[0].sub_sub.length とか。

Comments

[takochan1192]

確かにおっしゃる通り、おかしいかったです。コードを修正してみたのですが、現状まだエラーが出続けている状態です。
なかなか、修正へと至らず、非常に困っております。
何か、おかしい部分があれば指摘していただけますと大変参考になります。

[plasticgrammer]

修正後のエラーは同じものでしょうか？

[takochan1192]

エラーの部分も編集し質問に追記致しました。どうやらrowspanCalcメソッドの部分でうまく値を返却できていないようなのです。

[plasticgrammer]

rowSpanCalcのメソッド定義と呼び出しで、大文字小文字が一致していないようです。
row[S]panCalc
これが原因ではないでしょうか。

[takochan1192]

ご指摘ありがとうございます。おっしゃる通りでした。
Sを直して実行したのですが、”Cannot read property 'reduce' of undefined”というエラーが表示されております。やはりメソッド自体がおかしい部分があるのでしょうか？

[plasticgrammer]

item.subをメソッドに渡していて、さらにそのsubを参照しているように思えます。
引数か参照部分を修正してみてください。

[takochan1192]

やはり渡している引数部分がおかしかったようです。質問のコードを修正致しました。
ただ、質問の通り、現状画面が崩れて表示されております。
何かアドバイスをいただけませんでしょうか？

[plasticgrammer]

すみません。記載頂いているエラーの原因がわかっていません。
ソースを見る限り問題はないかと考えておりますが。
何か進展がありましたら、情報を更新頂ければと思います。

[takochan1192]

なんとか完成させることができました。色々とご教示いただきましてありがとうございました。