Question

0

973

Views

v-for loop throws Uncaught TypeError: row.children.default is not a function

I'm using Vue3 with PrimeVue and want to create dynamic table header sections based on a config file. I modified the sample code from the docs for column groups https://primefaces.org/primevue/showcase/#/datatable/colgroup .

When hardcoding headers everything is fine

<template>
  <div id="app">
    <p-data-table>
      <p-column-group type="header">
        <p-row>
          <p-column header="Section 1" :rowspan="4" :colspan="1" />
          <p-column header="Section 2" :rowspan="1" :colspan="2" />
          <p-column header="Section 3" :rowspan="1" :colspan="3" />
          <p-column header="Section 4" :rowspan="1" :colspan="1" />
        </p-row>
        <p-row>
          <p-column header="Section 2.1" :rowspan="3" :colspan="1" />
          <p-column header="Section 2.2" :rowspan="3" :colspan="1" />
          <p-column header="Section 3.1" :rowspan="3" :colspan="1" />
          <p-column header="Section 3.2" :rowspan="1" :colspan="2" />
          <p-column header="Section 4.1" :rowspan="1" :colspan="1" />
        </p-row>
        <p-row>
          <p-column header="Section 3.2.1" :rowspan="2" :colspan="1" />
          <p-column header="Section 3.2.2" :rowspan="2" :colspan="1" />
          <p-column header="Section 4.1.1" :rowspan="1" :colspan="1" />
        </p-row>
        <p-row>
          <p-column header="Section 4.1.1.1" :rowspan="1" :colspan="1" />
        </p-row>
      </p-column-group>
    </p-data-table>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import DataTable from "primevue/datatable";
import Column from "primevue/column";
import Row from "primevue/row";
import ColumnGroup from "primevue/columngroup";

export default defineComponent({
  components: {
    "p-data-table": DataTable,
    "p-column": Column,
    "p-row": Row,
    "p-column-group": ColumnGroup,
  }
});
</script>

The generated output is as expected

You can see the working live demo here

When trying to load the hardcoded headers from code like so

<template>
  <div id="app">
    <p-data-table>
      <p-column-group type="header">
        <p-row
          v-for="(columnHeaderRow, columnHeaderRowIndex) in columnHeaderRows"
          :key="`columnHeaderRow-${columnHeaderRowIndex}`"
        >
          <p-column
            v-for="(columnHeader, columnHeaderIndex) in columnHeaderRow"
            :key="`columnHeader-${columnHeaderIndex}`"
            :header="columnHeader.header"
            :rowspan="columnHeader.rowspan"
            :colspan="columnHeader.colspan"
          />
        </p-row>
      </p-column-group>
    </p-data-table>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import DataTable from "primevue/datatable";
import Column from "primevue/column";
import Row from "primevue/row";
import ColumnGroup from "primevue/columngroup";

export default defineComponent({
  components: {
    "p-data-table": DataTable,
    "p-column": Column,
    "p-row": Row,
    "p-column-group": ColumnGroup,
  },
  setup() {
    const columnHeaderRows = ref([
      [
        { header: "Section 1", rowspan: "4", colspan: "1" },
        { header: "Section 2", rowspan: "1", colspan: "2" },
        { header: "Section 3", rowspan: "1", colspan: "3" },
        { header: "Section 4", rowspan: "1", colspan: "1" },
      ],
      [
        { header: "Section 2.1", rowspan: "3", colspan: "1" },
        { header: "Section 2.2", rowspan: "3", colspan: "1" },
        { header: "Section 3.1", rowspan: "3", colspan: "1" },
        { header: "Section 3.2", rowspan: "1", colspan: "2" },
        { header: "Section 4.1", rowspan: "1", colspan: "1" },
      ],
      [
        { header: "Section 3.2.1", rowspan: "2", colspan: "1" },
        { header: "Section 3.2.2", rowspan: "2", colspan: "1" },
        { header: "Section 4.1.1", rowspan: "1", colspan: "1" },
      ],
      [{ header: "Section 4.1.1.1", rowspan: "1", colspan: "1" }],
    ]);

    return { columnHeaderRows };
  },
});
</script>

I get the following error