现在有一个table表格，我要点击每行的编辑按钮，然后根据id跳转到编辑页面进行编辑，怎么操作，加上id我老是404， 技术栈是vue3+ts

Question

现在有一个table表格，我要点击每行的编辑按钮，然后根据id跳转到编辑页面进行编辑，怎么操作，加上id我老是404， 技术栈是vue3+ts

Answer 1

代码如下，你试试：

<!-- Table.vue -->
<template>
  <table>
    <tr v-for="item in items" :key="item.id">
      <td>{{ item.name }}</td>
      <td>
        <button @click="editItem(item.id)">编辑</button>
      </td>
    </tr>
  </table>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        // 其他数据项
      ]
    };
  },
  methods: {
    editItem(id: number) {
      this.$router.push(`/edit/${id}`);
    }
  }
});
</script>