Javascript 禁用从vue.js 2中的循环创建的表的最后td的按钮

我有两个组件来设置按钮，在调用按钮组件的地方，有一个v-for来循环其他项.现在，我希望最后一个内的按钮或如果只生成一个则被禁用.

这是我的代码

<template>
  <div class="clickable-text" @click="() => !disabled && onClick()">
    <div :class="className">{{ text }}</div>
    <IconSpinner v-if="loading" class="ml-1" />
  </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;
  @Prop({}) loading: boolean;

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

上面的组件是在里面使用的

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

，{{text}} prop位于v-bind=" title[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>

循环的结果是这样的，如果隐藏联系人按钮是唯一的项或最后一项，我想禁用它.