Vue中TodoList案例_编辑

nextTick: 

MyItem.vue

加一个编辑按钮,input框:@blur失去焦点时触发事件handleBlur,ref获取真实dom:

     <inputtype="text"v-show="todo.isEdit":value="todo.title"@blur="handleBlur(todo,$event)"ref="inputTitle"><button class="btn btn-edit" @click="handleEdit(todo)" v-show="!todo.isEdit">编辑</button>

methods加俩方法:

 //编辑handleEdit(todo){if (todo.hasOwnProperty.call('isEdit')){todo.isEdit = true}else {console.log('a@@')this.$set(todo,'isEdit',true)}// setTimeout(()=>{//   this.$refs.inputTitle.focus()// },20)this.$nextTick(function (){this.$refs.inputTitle.focus()})},//失去焦点回调(真正执行修改逻辑)handleBlur(todo,e){todo.isEdit=falseif (!e.target.value.trim())return alert('输入不能为空')this.$bus.$emit('updateTodo',todo.id,e.target.value)}

App.vue:

methods:中加一个方法

 //更新一个todoupdateTodo(id,title){this.todos.forEach((todo)=>{if (todo.id===id)todo.title=title})},

mounted钩子中添加

    this.$bus.$on('updateTodo',this.updateTodo)

beforeDestroy钩子中添加

    this.$bus.$off('updateTodo')

style中加编辑按钮样式:

.btn-edit {color: #fff;background-color: skyblue;border: 1px solid #0f7daa;margin-right: 3px;
}

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/8022.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

服务器中了360后缀勒索病毒,360后缀勒索病毒介绍解密数据恢复

360后缀勒索病毒&#xff0c;是BeijingCrypt勒索家族中的一种勒索软件病毒&#xff0c;这种恶意软件一旦攻击了企业的服务器就会利用自身独特的加密技术来全盘扫描系统文件&#xff0c;并对用户的全部文件进行加密&#xff0c;并要求用户支付赎金以解锁文件。近期&#xff0c;我…

SystemVerilog 第2章:数据类型

在 Verilog中,初学者经常分不清reg和wire两者的区别。应该使用它们中哪一个来驱动端口?连接不同模块时又该如何做? Systemverilog对经典的reg数据类型进行了改进,使得它除了作为一个变量以外,还可以被连续赋值、门单元和模块所驱动。为了与寄存器类型相区别,这种改进的数据类…

Python封装:提升代码质量的秘诀

在面向对象编程&#xff08;OOP&#xff09;中&#xff0c;封装是一种将数据和操作数据的方法绑定在一起的机制&#xff0c;以隐藏内部实现的细节&#xff0c;使代码更简洁、更安全。在Python中&#xff0c;我们通过定义类来实现封装。在本文中&#xff0c;我们将介绍Python封装…

常微分方程建模R包ecode(一)——构建常微分方程系统

常微分方程在诸多研究领域中有着广泛应用&#xff0c;本文希望向大家介绍笔者于近期开发的R包ecode&#xff0c;该包采用简洁易懂的语法帮助大家在R环境中构建常微分方程&#xff0c;并便利地调用R图形接口&#xff0c;研究常微分方程系统的相速矢量场、平衡点、稳定点等解析性…

视频内存过大如何压缩变小?这个压缩方法了解一下

在日常生活中&#xff0c;不管是日常随手拍的视频还是在工作中遇到的视频文件&#xff0c;在编辑处理的时候&#xff0c;如果视频的内存过大&#xff0c;不仅会占用很大的内存&#xff0c;在传送的时候也会花费很长时间&#xff0c;这时候将视频给压缩一下就可以很好的解决这一…

Feign远程调用如何携带form url

这是一个需要携带参数在form url上的请求&#xff0c;正常调用方式是这样的 响应&#xff1a; 在Feign中&#xff0c;应该怎么调用呢?? 定义OpenFeignClient接口 FeignClient(value "client-service", url "http://127.0.0.1/api") public interface…

Unity游戏源码分享-3d机器人推箱子游戏

Unity游戏源码分享-3d机器人推箱子游戏 一个非常意思的3D游戏 工程地址&#xff1a;https://download.csdn.net/download/Highning0007/88098014

STM32CUBEMX配置 定时器中断 和 上升沿中断(实现检测1s以内的脉冲个数)

———————————————————————————————————— ⏩ 大家好哇&#xff01;我是小光&#xff0c;嵌入式爱好者&#xff0c;一个想要成为系统架构师的大三学生。 ⏩最近在开发一个STM32H723ZGT6的板子&#xff0c;使用STM32CUBEMX做了很多驱动&#x…

Redis简介、常用命令

目录 一、​​关系数据库​​与非关系型数据库概述 1.1 关系型数据库 1.2 非关系型数据库 二、关系数据库与非关系型数据库区别 2.1 数据存储方式不同 2.2 扩展方式不同 2.3 对事务性的支持不同 三、非关系型数据库产生背景 四、Redis简介 4.1 Redis的单线程模式 4.…

评论管理功能

后端 bp.get("/comment/list") def comment_list():comments CommentModel.query.order_by(CommentModel.create_time.desc()).all()comment_list []for comment in comments:comment_dict comment.to_dict()comment_list.append(comment_dict)return restful.ok…

网络超时导致namenode被kill的定位

交换机升级导致部分网络通信超时, 集群的namenode主从切换后,主namenode进程被杀死。 网络问题导致namenode与zk间的连接超时触发了hadoop集群的防脑裂机制而主动kill掉了超时的namenode进程。 日志分析发现zk和namenode之间的网络连接超时: 超时触发了namenode切换,并将超时…

ES6基础知识七:你是怎么理解ES6中 Generator的?使用场景?

一、介绍 Generator 函数是 ES6 提供的一种异步编程解决方案&#xff0c;语法行为与传统函数完全不同 回顾下上文提到的解决异步的手段&#xff1a; 回调函数promise 那么&#xff0c;上文我们提到promsie已经是一种比较流行的解决异步方案&#xff0c;那么为什么还出现Gen…

Flutter中如何取消任务

前言 在开发过程中&#xff0c;取消需求是很常见的&#xff0c;但很容易被忽略。然而&#xff0c;取消需求的好处也很大。例如&#xff0c;在页面中会发送很多请求。如果页面被切走并处于不可见状态&#xff0c;就需要取消未完成的请求任务。如果未及时取消&#xff0c;则可能…

Android平台GB28181设备接入模块之按需编码和双码流编码

技术背景 我们在做执法记录仪或指挥系统的时候&#xff0c;会遇到这样的情况&#xff0c;大多场景下&#xff0c;我们是不需要把设备端的数据&#xff0c;实时传给国标平台端的&#xff0c;默认只需要本地录像留底&#xff0c;如果指挥中心需要查看前端设备实时数据的时候&…

Python实现九宫格数独小游戏

1 问题 有1-9个数字&#xff0c;将他们填入一个3*3的九宫格中&#xff0c;使得他们的每行&#xff0c;每列&#xff0c;以及对角线上的和相等&#xff0c;且要求每个格子的数字不可以重复。使用python列出所有可能的组合。示例如下: 2 方法 每行&#xff0c;列&#xff0c;对角…

临时文档4

Redis有哪些数据类型 Redis主要有5种数据类型&#xff0c;包括String&#xff0c;List&#xff0c;Set&#xff0c;Zset&#xff0c;Hash&#xff0c;满足大部分的使用要求 Redis的应用场景 总结一 计数器 可以对 String 进行自增自减运算&#xff0c;从而实现计数器功能。…

uni-app优雅的实现时间戳转换日期格式

现在显示的格式如下图&#xff1a; 我期望统一格式&#xff0c;所以不妨前端处理一下&#xff0c;核心代码如下 filters: {// 时间戳处理formatDate: function(value, spe /) {value value * 1000let data new Date(value);let year data.getFullYear();let month data.…

微信认证申请流程(个体工商户)

登录微信公众平台->设置->微信认证->开通 第一步&#xff1a;同意协议&#xff1a;签署《微信公众平台认证服务协议》 第二步&#xff1a;选择认证类型及填写认证资料 选择认证类型及上传申请公函 个体户资质信息 认证联系人信息&#xff1a;个体工商户联系人必须为法…

【如何训练一个中译英翻译器】LSTM机器翻译模型部署之ncnn(python)(五)

系列文章 【如何训练一个中译英翻译器】LSTM机器翻译seq2seq字符编码&#xff08;一&#xff09; 【如何训练一个中译英翻译器】LSTM机器翻译模型训练与保存&#xff08;二&#xff09; 【如何训练一个中译英翻译器】LSTM机器翻译模型部署&#xff08;三&#xff09; 【如何训练…

【优选算法题练习】day8

文章目录 一、974. 和可被 K 整除的子数组1.题目简介2.解题思路3.代码4.运行结果 二、525. 连续数组1.题目简介2.解题思路3.代码4.运行结果 三、560. 和为 K 的子数组1.题目简介2.解题思路3.代码4.运行结果 总结 一、974. 和可被 K 整除的子数组 1.题目简介 974. 和可被 K 整…