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代码
May 28 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
May 14 Javascript
require.js深入了解 require.js特性介绍
Sep 04 Javascript
详解JavaScript基于面向对象之继承实例
Dec 16 Javascript
Extjs实现下拉菜单效果
Apr 01 Javascript
AngularJS入门教程之XHR和依赖注入详解
Aug 18 Javascript
VUE中的无限循环代码解析
Sep 22 Javascript
使用vux实现上拉刷新功能遇到的坑
Feb 08 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
Apr 09 Javascript
从0到1搭建Element的后台框架的方法步骤
Apr 10 Javascript
微信小程序实现的五星评价功能示例
Apr 25 Javascript
axios实现文件上传并获取进度
Mar 25 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下删除字符串中HTML标签的函数
2008/08/27 PHP
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
PHP curl实现抓取302跳转后页面的示例
2014/07/04 PHP
php微信公众平台开发类实例
2015/04/01 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
IE和Firefox下javascript的兼容写法小结
2008/12/10 Javascript
nodejs的10个性能优化技巧
2014/07/15 NodeJs
浅谈angularJS中的事件
2016/07/12 Javascript
微信小程序入门教程
2016/11/18 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
Angular2.js实现表单验证详解
2017/06/23 Javascript
详解js静态检查工具eslint配置文件
2018/11/23 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
python使用urllib2提交http post请求的方法
2015/05/26 Python
Python实现把数字转换成中文
2015/06/29 Python
Python设计模式之抽象工厂模式
2016/08/25 Python
Python子类继承父类构造函数详解
2019/02/19 Python
python3.6 tkinter实现屏保小程序
2019/07/30 Python
Python 处理文件的几种方式
2019/08/23 Python
如何基于Python实现自动扫雷
2020/01/06 Python
使用python实现飞机大战游戏
2020/03/23 Python
PyCharm2020.1.1与Python3.7.7的安装教程图文详解
2020/08/07 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
2021/02/01 Python
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
普通员工辞职信
2014/01/17 职场文书
服装行业创业计划书范文
2014/02/05 职场文书
霸气押韵的班级口号
2014/06/09 职场文书
师范类求职信
2014/06/21 职场文书
勤俭节约倡议书范文
2015/04/29 职场文书
我的中国梦主题教育活动总结
2015/05/07 职场文书
2015年度企业工作总结
2015/05/21 职场文书
军训通讯稿范文
2015/07/18 职场文书
你会写请假条吗?
2019/06/26 职场文书
解决python存数据库速度太慢的问题
2021/04/23 Python
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers