带有操作按钮的v-data-table列中的重复单击事件

<template>
  <v-data-table
    :headers="headers"
    :items="items"
    item-key="id"
  >
    <template v-slot:item.actions="{ item }">
      <v-btn @click="handleButtonClick(item.id)">
        {{ getButtonLabel(item.id) }}
      </v-btn>
    </template>
  </v-data-table>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        { text: 'ID', value: 'id' },
        { text: 'Name', value: 'name' },
        { text: 'Actions', value: 'actions' },
      ],
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
      buttonClickCounts: {},
    };
  },
  methods: {
    handleButtonClick(itemId) {
      if (!this.buttonClickCounts[itemId]) {
        this.buttonClickCounts[itemId] = 1;
      } else {
        this.buttonClickCounts[itemId]++;
      }

      // 根据点击次数执行相应的操作
      switch (this.buttonClickCounts[itemId]) {
        case 1:
          // 第一次点击的操作
          break;
        case 2:
          // 第二次点击的操作
          break;
        // 其他点击次数的操作
      }
    },
    getButtonLabel(itemId) {
      return `Button (${this.buttonClickCounts[itemId] || 0})`;
    },
  },
};
</script>