vue中input的v-model清空操作


Posted in Javascript onSeptember 06, 2019

问题来源

写input组件的时候需求一个清空按钮,但是如果直接修改prop中父级的传值会报错。但是如果不修改父级无法更新值,也会带来开发的问题。

解决

v-model 完成大部分数据双向绑定

<input type="text" :value="inputValue"
      @change="$emit('change',$event.target.value)"
      @blur="$emit('blur',$event.target.value)"
      @focus="$emit('focus',$event.target.value)"
      @input ="$emit('input',$event.target.value)"
  >

四个事件将input的事件传递,在父级使用

<g-input v-model="num"></g-input>

但是在清空操作上出现难题,因为无论怎么操作都无法触发vue上的数据驱动,简单清空子组件上的维护的数据是没有同步到父级上的,这里无疑最佳方案就是单向的数据流,让子组件发生事件时通知父级,父元素传值发生改变,进而改变子组件。不过感觉这样做就违背使用v-model的初衷,但是也没有办法了

对要进行监听的dom绑定事件

子组件中:

<div @click="clear">
   <g-icon></g-icon>
</div>

将需要清空数据的消息告诉父级

clear(){
   this.$emit('inputclear',{clear:''})
  }

以上两种可以合并成

<div @click="$emit('inputclear',{clear:''})">
   <g-icon v-if="isClearShow" icon="error" class="clearForInput" ></g-icon>
</div>

父级中:

<g-input v-model="num" @inputclear="num = $event.clear"></g-input>

现在就可以了

总结

以上所述是小编给大家介绍的vue中input的v-model清空操作,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
理解javascript中的严格模式
Feb 01 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
Feb 19 Javascript
Vue keep-alive实践总结(推荐)
Aug 31 Javascript
原生javascript实现文件异步上传的实例讲解
Oct 26 Javascript
详解vue-cli 接口代理配置
Dec 13 Javascript
Vue中如何实现proxy代理
Apr 20 Javascript
Angular4 组件通讯方法大全(推荐)
Jul 12 Javascript
apicloud拉起小程序并传递参数的方法示例
Nov 21 Javascript
bootstrap tooltips在 angularJS中的使用方法
Apr 10 Javascript
JavaScript交换变量的常用方法小结【4种方法】
May 07 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
Sep 06 #Javascript
layui 表格操作列按钮动态显示的实现方法
Sep 06 #Javascript
基于Vue和Element-Ui搭建项目的方法
Sep 06 #Javascript
微信小程序 搜索框组件代码实例
Sep 06 #Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 #Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
Sep 06 #Javascript
jQuery实现每日秒杀商品倒计时功能
Sep 06 #jQuery
You might like
php操作xml
2013/10/27 PHP
win平台安装配置Nginx+php+mysql 环境
2016/01/12 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
php微信开发之图片回复功能
2018/06/14 PHP
解决Laravel5.2 Auth认证退出失效的问题
2019/10/14 PHP
一直复略了的一个问题,关于表单重复提交
2007/02/15 Javascript
jQuery中filter(),not(),split()使用方法
2010/07/06 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
2013/04/26 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
js弹出层永远居中实现思路及代码
2013/11/29 Javascript
超赞的动手创建JavaScript框架的详细教程
2015/06/30 Javascript
JavaScript实现图片轮播的方法
2015/07/31 Javascript
bootstrap响应式表格实例详解
2017/05/15 Javascript
详解如何使用React Hooks请求数据并渲染
2020/10/18 Javascript
vue组件中传值EventBus的使用及注意事项说明
2020/11/16 Javascript
Python基于dom操作xml数据的方法示例
2018/05/12 Python
Python实现的查询mysql数据库并通过邮件发送信息功能
2018/05/17 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
意大利团购网站:Groupon意大利
2016/10/11 全球购物
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
什么是类的返射机制
2016/02/06 面试题
Overload和Override的区别
2012/09/02 面试题
财务方面个人工作的自我评价
2013/12/28 职场文书
影视动画专业个人的自我评价
2013/12/31 职场文书
中学家长会邀请函
2014/02/03 职场文书
青年志愿者活动总结
2014/04/26 职场文书
企业活动策划方案
2014/06/02 职场文书
计算机多媒体专业自荐信
2014/07/04 职场文书
歌剧魅影观后感
2015/06/05 职场文书
Html5调用企业微信的实现
2021/04/16 HTML / CSS
Spring Boot两种全局配置和两种注解的操作方法
2021/06/29 Java/Android
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技
Android在Sqlite3中的应用及多线程使用数据库的建议
2022/04/24 Java/Android