<div id="app"> <div class="grid"> <div> <h1>图书管理</h1> <div class="book"> <div> <label for="id"> 编号： </label> <input type="text" id="id" v-model='id' :disabled="flag"> <label for="name"> 名称： </label> <input type="text" id="name" v-model='name'> <button @click='handle'>提交</button> </div> </div> </div> <table> <thead> <tr> <th>编号</th> <th>名称</th> <th>时间</th> <th>操作</th> </tr> </thead> <tbody> <tr :key='item.id' v-for='item in books'> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.date}}</td> <td> <!--- 4.1 给修改按钮添加点击事件， 需要把当前的图书的id 传递过去 这样才知道需要修改的是哪一本书籍 ---> <a href="" @click.prevent='toEdit(item.id)'>修改</a > <span>|</span> <a href="" @click.prevent>删除</a > </td> </tr> </tbody> </table> </div> </div>用vue实现界面想要的图书信息修改，点击修改按钮后将编号传入编号输入栏并禁用，在图书名称输入栏进行名字的修改

可以先定义一个 data 属性，包括 books 数组、id 和 name 字符串、flag 布尔值：

data() {
  return {
    books: [
      { id: 1, name: 'book1', date: '2022-01-01' },
      { id: 2, name: 'book2', date: '2022-01-02' },
      { id: 3, name: 'book3', date: '2022-01-03' }
    ],
    id: '',
    name: '',
    flag: true
  }
}

然后在 toEdit 方法中，将传入的 id 赋值给 data 中的 id，并且将 flag 设为 true：

toEdit(id) {
  const book = this.books.find(item => item.id === id)
  this.id = book.id
  this.name = book.name
  this.flag = true
}

在模板中，使用 v-model 绑定输入框的值，并且根据 flag 的值控制编号输入框的禁用状态：

<label for="id"> 编号： </label>
<input type="text" id="id" v-model='id' :disabled="flag">
<label for="name"> 名称： </label>
<input type="text" id="name" v-model='name'>
<button @click='handle'>提交</button>

最后，在 handle 方法中，根据 id 找到对应的书籍并修改其名称，然后将 id 和 name 重置为空，并将 flag 设为 false：

handle() {
  const book = this.books.find(item => item.id === this.id)
  book.name = this.name
  this.id = ''
  this.name = ''
  this.flag = false
}