<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中的内容

时间: 2024-02-10 09:15:21 浏览: 96

您可以将修改书名的操作改为传入书的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> ```

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>  <link rel="stylesheet" href="bootstrap.min.css"> <script src="vue.js"></script> </head> <body> <div id="app"> <div class="panel panel-primary"> <div class="panel-heading"> <h2>图书管理系统</h2> </div> <div class="panel-body form-inline"> <label>id: </label><input type="text" class="form-control" v-model="id" disabled> <label>name: </label><input type="text" class="form-control" v-model="name" onchange="onchange(id)"> <input type="button" value="添加" class="btn btn-primary" @click. ="add" :disable="isEditable"> </div> <table class="table table-bordered table-hover"> <thead> <tr> <td>id</td> <td>name</td> <td>time</td> </tr> </thead> <tbody> <tr v-for="book in books" :key="book.id"> <td>{{book.id}}</td> <td>{{book.name}}</td> <td>{{book.time}}</td> <td><a href="" onclick.prevent="del(book.id)" >删除</a></td> </tr> </tbody> </table> </div> </div> <script src="vue.js"></script> <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) }, method:{ onchange(){ if (this.name!=''){ this.isEditable=false }else{ this.isEditable=true } }, add(){ this.books.push({'id':this.id,'name':this.name,'time':new Date()}) this.id++ this.name='' }, del(id){ let index=this.books.findIndex((item)=>{ if(item.id==id){ return true } }) this.books.splice(index,1) } } }) </script> </body> </html> 补充代码

这段代码是一个简单的图书管理系统的前端页面，使用了Vue.js框架进行开发。其中包含了一个表单，用于添加新书籍，以及一个表格，用于展示已有的书籍信息，并可以进行删除操作。需要补充的代码： 1. 引入Vue.js和bootstrap.min.css样式表的文件路径。 2. 在mounted()钩子函数中，将id初始化为books数组长度加1，保证每次添加新书籍时id的自增。 3. 在method对象中，添加onchange()、add()和del()三个方法，分别用于判断表单是否为空、添加新书籍和删除指定书籍。需要注意的是，@click和:disabled属性中的点号都是错误的，需要更正为"."。

<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(id) { let book = this.books.find(item => item.id === id); let newBookName = prompt('请输入新书名', book.name); if (newBookName !== null) { books.name = newBookName; } } } }) </script>在页面中可以修改图书的名字

这段代码看起来有点问题。在 `updateBookName` 方法中，你应该使用 `book.name` 而不是 `books.name` 来更新书名。另外，你需要为每本书创建一个唯一的 id，以便在更新书名时能够正确地找到对应的书。可以将 `id` 作为 `add` 方法的局部变量，每次添加新书时自增。以下是修改后的代码示例： ``` <script> let app = new Vue({ el: '#app', data: { id: 1, // 初始 id 值为 1 name: '', books: [ { 'id': 1, 'name': 'Vue.js入门', 'time': new Date() } ], isEditable: true }, 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++ // 每次添加新书时自增 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(id) { let book = this.books.find(item => item.id === id); let newBookName = prompt('请输入新书名', book.name); if (newBookName !== null) { book.name = newBookName; // 使用 book.name 而不是 books.name } } } }) </script> ``` 现在，在页面中可以修改图书的名字了。点击书名右侧的“编辑”按钮，弹出对话框输入新书名即可。

阅读全文

相关推荐

uni-app性能优化：逻辑层与视图层策略及组件模式详解

Vue动画过渡：<transition>标签详解及实战应用

Vue 实现动画过渡效果：<transition> 指令详解

【JavaScript源代码】Vue实现简单购物车小案例.docx

【Vue.js单页应用开发】：构建流畅的图书管理前端界面

【北航2020预推免笔试题技术研讨】：前端与后端开发知识的深度整合

vue实现图书管理系统

给我写一个 springboot + vue 的实战项目

Vue.js教程：Vue3语法详解与实战入门

Vue框架实战：全面掌握并开发高仿美团外卖App

基于springboot的酒店管理系统源码（java毕业设计完整源码+LW）.zip

蓄电池与超级电容混合储能并网matlab simulink仿真模型 （1）混合储能采用低通滤波器进行功率分配，可有效抑制功率波动，并对超级电容的soc进行能量管理，soc较高时多放电，较低时少放电

017 - 搞笑一句话台词.docx

基于微信小程序的购物系统+php后端毕业源码案例设计全部资料+详细文档.zip

基于APS.net的办公物品管理系统全部资料+详细文档.zip

一个使用 Rust 语言编写的简单命令行计算器程序示例，它可以实现基本的加、减、乘、除运算功能

“服务之心”：大学生自愿者服务网系统的功能开发

慧集通（DataLinkX）集成客户案例：水泥行业海运运输业务致远OA与畅捷通TCloud集成解决方案

大家在看

新项目基于YOLOv8的人员溺水检测告警监控系统python源码(精确度高)+模型+评估指标曲线+精美GUI界面.zip

SPiiPlus ACSPL+ Command & Variable Reference Guide.pdf

论文研究 - 基于UPQC的电能质量模糊控制器的实现。

ChinaTest2013-测试人的能力和发展-杨晓慧

Pattern Recognition and Machine Learning习题答案（英文）

最新推荐

基于springboot的酒店管理系统源码（java毕业设计完整源码+LW）.zip

WildFly 8.x中Apache Camel结合REST和Swagger的演示

管理建模和仿真的文件

【声子晶体模拟全能指南】：20年经验技术大佬带你从入门到精通

2024-07-27怎么用python转换成农历日期

FDFS客户端Python库1.2.6版本发布

"互动学习：行动中的多样性与论文攻读经历"

传感器集成全攻略：ICM-42688-P运动设备应用详解

matlab 中实现 astar

掌握Dash-Website构建Python数据可视化网站

蓄电池与超级电容混合储能并网matlab simulink仿真模型（1）混合储能采用低通滤波器进行功率分配，可有效抑制功率波动，并对超级电容的soc进行能量管理，soc较高时多放电，较低时少放电