'How to prevent v-slot:body from overwriting v-data-table property show-expand with Vue

It seems that v-slot:body overwrites data table properties like show-expand.

<div class="d-flex mb-0 overflow-hidden">
          <v-data-table
            item-key="id"
            hide-default-footer
            fixed-header
            disable-sort
            :headers="headers"
            :items="items"
            :items-per-page="-1"
            :expanded.sync="expanded"
            show-expand
          >
            <template v-slot:body="props">
              <tbody v-if="props.items.length === 0">
                <tr class="v-data-table__empty-wrapper">
                  <td colspan="9">{{ $t('No data available') }}</td>
                </tr>
              </tbody>
              <template v-else>
                <tbody v-for="item in getItems(props)" :key="item.id">
                  <tr
                    v-for="(action, actionIndex) in getActions(item)"
                    :key="action.id"
                    :class="action.dueTimeDelta.futureGrace ? 'action-operation--grace-period' : ''"
                  >
                    <template v-if="actionIndex === 0">
                      <td :rowspan="item.actions.length">
                        <ticket-number :ticket-number="item.ticketNumber" />
                      </td>
                      <td :rowspan="item.actions.length">
                        <user-avatar v-if="item.user" :user="item.user" :size="36" />
                      </td>
                      <td :rowspan="item.actions.length">
                        <a
                          :title="$t('Open plan in new tab')"
                          :href="item.monitorUrl"
                          target="_blank"
                        >
                          {{ item.name }}
                        </a>
                      </td>
                      <td :rowspan="item.actions.length">
                        <v-menu offset-y>
                          <template v-slot:activator="{ on, attrs }">
                            <v-btn
                              color="grey"
                              small
                              elevation="0"
                              :loading="getItemDataById(item.id).inpOperationPending"
                              v-bind="attrs"
                              v-on="on"
                            >
                              {{ $t('INP') }}
                            </v-btn>
                          </template>
                          <v-list dense>
                            <v-list-item
                              link
                              :title="$t('Finishes the notification for the ticket')"
                              @click="handleInpOperationFinishedClick(item)"
                            >
                              <v-list-item-title>
                                {{ $t('Finish INP') }}
                              </v-list-item-title>
                            </v-list-item>
                            <v-list-item
                              link
                              :title="$t('Ignores the notification for the ticket')"
                              @click="handleInpOperationIgnoreAllClick(item)"
                            >
                              <v-list-item-title>
                                {{ $t('Ignore INP') }}
                              </v-list-item-title>
                            </v-list-item>
                          </v-list>
                        </v-menu>
                      </td>
                      <td class="table__hostnames" :rowspan="item.actions.length">
                        <ul class="pa-0">
                          <li v-for="hostName in getHostNames(item)" :key="hostName">
                            {{ hostName }}
                          </li>
                        </ul>
                      </td>
                    </template>
                    <td class="action-operation__btn">
                      <v-btn
                        class="action-operation-content"
                        icon
                        @click.stop="handleShowInpActionDetailsClick(item, action)"
                      >
                        <v-icon :color="action.notificationRelevant ? 'alarming' : ''">
                          {{ getActionTypeIcon(action) }}
                        </v-icon>
                      </v-btn>
                    </td>
                    <td class="table__time">
                      <span class="action-operation-content">{{ $t(`${action.ttaat} m`) }}</span>
                    </td>
                    <td class="table__date">
                      <timer class="action-operation-content" :time-delta="action.dueTimeDelta" />
                    </td>
                    <td>
                      <v-menu offset-y>
                        <template v-slot:activator="{ on, attrs }">
                          <v-btn
                            class="action-operation-content"
                            color="secondary"
                            small
                            dark
                            elevation="0"
                            :loading="getItemDataById(item.id).inpActionOperationPending[action.id]"
                            v-bind="attrs"
                            v-on="on"
                          >
                            {{ $t('Action') }}
                          </v-btn>
                        </template>
                        <v-list dense>
                          <v-list-item
                            link
                            :title="$t('Marks the action as done')"
                            @click="handleInpActionOperationDoneClick(item, action)"
                          >
                            <v-list-item-title>
                              {{ $t('Done') }}
                            </v-list-item-title>
                          </v-list-item>
                          <v-list-item
                            link
                            :title="$t('Marks the action as ignored')"
                            @click="handleInpActionOperationIgnoreClick(item, action)"
                          >
                            <v-list-item-title>
                              {{ $t('Ignore') }}
                            </v-list-item-title>
                          </v-list-item>
                        </v-list>
                      </v-menu>
                    </td>
                  </tr>
                </tbody>
              </template>
            </template>

So due to that no expand icon is being displayed in that row. Is there another way to create expandable rows or is there an alternative to the way I am using <template v-slot:body="props">? Or do I have too much business logic inside the hmtl part? Help is very much appreciated.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source