<script> let app=new Vue({ el:'#app', data:{ id:0, name:'', books:[ {'id':1,'name':'Vue.js入门','time':new Date()} ], isEditable:true }, mounted(){ this.id=this.books.length+1 console.log(this.id) }, methods:{ onchange(){ if(this.name!=''){ this.isEditable=false } else{ this.isEditable=true } }, add:function (){ for(let i=0;i<this.books.length;i++){ if(this.books[i].name===this.name){ console.log("该书已经存在") return } } this.books.push({'id':this.id,'name':this.name,'time':new Date()}) this.id++ this.name='' console.log(this.books) }, del(id){ let index=this.books.findIndex((item)=>{ if(item.id==id){ return true } }) this.books.splice(index,1) }, updateBookName() { let newBookName = prompt('请输入新书名', this.bookName) if (newBookName !== null) { this.books.name= newBookName } } } })更改updateBookName函数功能使其可以修改books中的内容

您可以将修改书名的操作改为传入书的id作为参数，然后使用find方法找到对应的书籍对象，并将其name属性更新为新的书名。修改后的代码如下：

updateBookName(id) {
  let book = this.books.find(item => item.id === id);
  let newBookName = prompt('请输入新书名', book.name);
  if (newBookName !== null) {
    book.name = newBookName;
  }
}

在页面中调用该函数时，需要传入要修改书名的书的id，如下：

<button @click="updateBookName(1)">修改书名</button>