How to do grouping on a table with Vue.js?

Question

HTML

I'm trying to group a table. There is an array of Customers, by which I want to group, and a dataTable array, in which there is a customer field. Tell me what am I doing wrong? Now I have Customers displayed one after another, and behind them is the entire table. It is necessary that data is displayed for each Customer, where customer is him, then the next one, etc.

<table class="table" ref="table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Address</th>
                        <th>Customer</th>
                        <th>Distributor</th>
                        <th>Email</th>
                        <th>Site</th>
                        <th>State</th>
                        <th>Edit</th>
                        <th>Delete</th>
                    </tr>
                </thead>
                <tr v-for="customer in customers">
                    <td colspan="8"><h4>{% verbatim %}{{ customer.name }}{% endverbatim %}</h4></td>
                </tr>
                <tr v-for="item in dataTable">
                        <td>{% verbatim %}{{ item.id }}{% endverbatim %}</td>
                        <td v-if="item.address.sub_locality"> {% verbatim %}{{ item.address.sub_locality }}, {{ item.address.raw_data }}{% endverbatim %}</td>
                        <td v-if="!item.address.sub_locality"></td>
                        <td>{% verbatim %}{{item.customer.name}}{% endverbatim %}</td>
                        <td>{% verbatim %}{{item.distributor.name}}{% endverbatim %}</td>
                        <td v-if="item.email !== 'nan'">{% verbatim %}{{item.email}}{% endverbatim %}</td>
                        <td v-if="item.email == 'nan'"></td>
                        <td>{% verbatim %}{{item.site}}{% endverbatim %}</td>
                        <td>{% verbatim %}{{item.state.name}}{% endverbatim %}</td>
                        <td><a><i class="glyphicon glyphicon-pencil" @click="showModalToEdit(item.id, item.address, item.email, item.site, item.customer, item.distributor, item.state)"></i></a></td>
                        <td><a @click="deleteItem(item.id)"><i class="ion-trash-a"></i></a></td>
                </tr>

            </table>

Answer 1

Make a calculated property where the grouping will be done:

computed: {
  grouped() {
    return this.dataTable.reduce((acc, n) => {
      (acc[n.customer.name] = acc[n.customer.name] || []).push(n);
      return acc;
    }, {});
  },
},

<template v-for="(items, customer) in grouped">
  <tr>
    ...
  </tr>
  <tr v-for="item in items">
    ...
  </tr>
</template>