使用vue实现一个添加和编辑的功能

<template>    <div>      <h2>我的列表</h2>      <ul>        <li v-for="(item, index) in items" :key="index">          {{ item.name }} - <button @click="editItem(index)">编辑</button>        </li>      </ul>      <form @submit.prevent="addItem">        <input type="text" v-model="newItemName" placeholder="添加新项">        <button type="submit">添加</button>      </form>      <form v-if="editing" @submit.prevent="updateItem">        <input type="text" v-model="editedItemName" placeholder="编辑项">        <button type="submit">保存</button>        <button @click="cancelEdit">取消</button>      </form>    </div>  </template>   <script>  export default {    data() {      return {        newItemName: '',        editedItemName: '',        editing: false,        items: [          // 初始数据项，你可以根据需要添加或删除          { name: 'Item 1' },          { name: 'Item 2' },          // ...        ],      };    },    methods: {      addItem() {        if (this.newItemName.trim()) {          this.items.push({ name: this.newItemName });          this.newItemName = '';        }      },      editItem(index) {        this.editing = true;        this.editedItemName = this.items[index].name;      },      updateItem() {        if (this.editedItemName.trim()) {          // 假设你正在编辑第一个项          const index = this.items.findIndex(item => item.name === this.editedItemName);          if (index !== -1) {            this.items[index].name = this.editedItemName;          }          this.editing = false;          this.editedItemName = '';        }      },      cancelEdit() {        this.editing = false;        this.editedItemName = '';      },    },  };  </script>