I have three components [Button, AppTable, Contact] which set the button and where the button component is called there is a v-for to loop through other items. Now i want the button inside the last or if there is only one generated to be disabled.

Here is my code for Button comp

<template>
  <div class="clickable-text" @click="() => !disabled && onClick()">
    <div :class="className">{{ text }}</div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
@Component({})
export default class ClickableText extends Vue {
  @Prop({ default: true }) text: string;
  @Prop({ default: 'default' }) disabled: boolean;
  @Prop() classes: string;
  @Prop({ default: true }) clickable: boolean;
  @Prop({ default: () => {} }) onClick: () => void;

  get className() {
    return {
      disabled: this.disabled,
      [this.classes]: this.classes,
      clickable: this.clickable && !this.disabled,
    };
  }
}
</script>

The above component is used inside AppTable component

<component :is="item[header.value].component" v-bind="item[header.value].props" />

, the {{text}} prop is within v-bind=”item[header.value].props”

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="header in headers" :key="header.value">
            <div @click="headerClicked(header)">
              {{ header.text }}
            </div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, n) in items" :key="n" data-qa="row" :id="item.id ? item.id.value : n">
          <td v-for="header in headers" :key="header.value" :data-qa="header.value">
            <div :class="itemClass(item, header)" @click="itemClicked(item, header)">
              <div v-if="item[header.value] && item[header.value].value">{{ item[header.value].value }}</div>
              <div v-else>
                <component :is="item[header.value].component" v-bind="item[header.value].props" />
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import { TableHeader, TableItem, TablePagination, AppTableItemClick } from './interfaces';

@Component
export default class AppTable extends Vue {
  @Prop() headers: TableHeader[];
  @Prop() items: TableItem[];
  @Prop() pagination?: TablePagination;

  itemClass(item: TableItem, header: TableHeader) {
    const isClickable = item[header.value]?.clickable;
    return { link: isClickable, clickable: isClickable };
  }

  headerClicked(header: TableHeader) {
    if (header.sortable) {
      this.$emit('headerClicked', header);
    }
  }

  itemClicked(item: TableItem, header: TableHeader): AppTableItemClick | undefined {
    const headerName = header.value;
    if (item[headerName]?.clickable) {
      const returnValue = { item, id: headerName };
      this.$emit('itemClicked', returnValue);
      item[headerName]?.onClick?.();
      return returnValue;
    }
  }
}
</script>

The result of the loop is like this and I want to disable Hide contact button if it is the only item or last item.

AppTable comp is used in many components but I want to only disable the click from a specific comp where it is used. e.g Contact comp.

<template>
    <AppTable v-if="showTable" :headers="headers" :items="items" @headerClicked="onHeaderClick" />
</template>