Vue js:如何在单击按钮时将类添加到最近的td

<template>
  <table>
    <tr>
      <td :class="tdClass" @click="addClassToTd">TD 1</td>
      <td :class="tdClass" @click="addClassToTd">TD 2</td>
      <td :class="tdClass" @click="addClassToTd">TD 3</td>
    </tr>
  </table>
  <button @click="addClassToTd">Add class</button>
</template>

<script>
export default {
  data() {
    return {
      tdClass: '' // 存储要添加的类名
    };
  },
  methods: {
    addClassToTd(event) {
      const targetTd = event.target.closest('td'); // 找到最近的td元素
      targetTd.classList.add('your-class'); // 添加类名

      // 可以根据需要添加其他逻辑或修改tdClass数据
    }
  }
};
</script>