通过在vuejs中弹出表单模式来编辑表中的特定行

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in items" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.email }}</td>
          <td>
            <button @click="editItem(index)">Edit</button>
          </td>
        </tr>
      </tbody>
    </table>

    <div v-if="isEditing">
      <h2>Edit Item</h2>
      <form @submit.prevent="saveItem">
        <label>Name:</label>
        <input v-model="editedItem.name" type="text" required>
        <br>
        <label>Email:</label>
        <input v-model="editedItem.email" type="email" required>
        <br>
        <button type="submit">Save</button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: "John Doe", email: "john@example.com" },
        { name: "Jane Smith", email: "jane@example.com" },
        { name: "Bob Johnson", email: "bob@example.com" }
      ],
      isEditing: false,
      editedItem: {
        name: "",
        email: ""
      },
      editedIndex: -1
    };
  },
  methods: {
    editItem(index) {
      this.isEditing = true;
      this.editedItem = { ...this.items[index] };
      this.editedIndex = index;
    },
    saveItem() {
      this.items.splice(this.editedIndex, 1, this.editedItem);
      this.isEditing = false;
      this.editedItem = { name: "", email: "" };
      this.editedIndex = -1;
    }
  }
};
</script>