解决vue项目input输入框双向绑定数据不实时生效问题


Posted in Javascript onAugust 05, 2020

我就废话不多说了,大家还是直接看代码吧~

<input type="text" maxlength="11" placeholder="请输入联系人电话" v-model="form.phone" />

这样的输入框,绑定的是data中的form对象上的phone字段。

在mounted钩子函数里边写:

this.form.phone = '1888888888';

这样在页面上时候不会随着输入框值改变而改变。

解决方法如下:

this.$set(this.form,"phone",this.$route.query.mobile)

或者绑定到data里边的一个字符串,也是可以解决的

补充知识:vue模块自动化脚本编译失败module not found

vue的for循环改了key值出现了这样的问题。

开始的写法(没出问题)

<div v-for="(item,index) in infos.visitStockReport" :key="index">

(出问题的写法)

<div v-for="(item) in infos.visitStockReport" :key="item.id">

开始的写法(没出问题)

<div class="record-info" v-for="(bb,index2) in cc.content" :key="index2">

(出问题的写法)

<div class="record-info" v-for="(bb) in cc.content" :key="bb.contentName">

解决方法:

1.可以把代码回退到原来 的,只有控制台waring,两个循环都是以index为key,并不影响正常的编译和运行。

找到了真正的原因:

v-for="(bb) in cc.content"这种写法的问题。

删掉了index那么也不需要括号了。

改成v-for="bb in cc.content"就好了。

以上这篇解决vue项目input输入框双向绑定数据不实时生效问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
prototype1.4中文手册
Sep 22 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
Dec 25 Javascript
document.documentElement的一些使用技巧
Apr 18 Javascript
一个JavaScript用逗号分割字符串实例
Sep 22 Javascript
jQuery添加删除DOM元素方法详解
Jan 18 Javascript
JavaScript File API实现文件上传预览
Feb 02 Javascript
JS判断字符串字节数并截取长度的方法
Mar 05 Javascript
js仿支付宝多方框输入支付密码效果
Sep 27 Javascript
js控制台输出的方法(详解)
Nov 26 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
Jun 07 Javascript
微信小程序三级联动选择器使用方法
May 19 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
Oct 30 Javascript
Vue 同步异步存值取值实现案例
Aug 05 #Javascript
详解vue路由
Aug 05 #Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
Aug 05 #Javascript
vant 自定义 van-dropdown-item的用法
Aug 05 #Javascript
浅谈vue 多个变量同时赋相同值互相影响
Aug 05 #Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
Aug 05 #Javascript
vue实现在进行增删改操作后刷新页面
Aug 05 #Javascript
You might like
深入php常用函数的使用汇总
2013/06/08 PHP
使用php统计字符串中中英文字符的个数
2013/06/23 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
PHP实现将浏览历史页面网址保存到cookie的方法
2015/01/26 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
取得传值的函数
2006/10/27 Javascript
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
JavaScript将取代AppleScript?
2014/09/18 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
2016/07/04 Javascript
AngularJS ng-mousedown 指令
2016/08/02 Javascript
jquery实现动态改变css样式的方法分析
2019/05/27 jQuery
node获取客户端ip功能简单示例
2019/08/24 Javascript
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
2020/04/30 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
python使用fork实现守护进程的方法
2017/11/16 Python
Python批量删除只保留最近几天table的代码实例
2019/04/01 Python
python3.7 利用函数os pandas利用excel对文件名进行归类
2019/09/29 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
美国按摩椅批发网站:Titan Chair
2018/12/27 全球购物
编码转换,怎样实现将GB2312编码的字符串转换为ISO-8859-1编码的字符串
2014/01/07 面试题
千元咖啡店的创业计划书范文
2013/12/29 职场文书
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
竞聘书怎么写,如何写?
2014/03/31 职场文书
向国旗敬礼学生寄语大全
2014/09/30 职场文书
钱学森观后感
2015/06/04 职场文书
python ansible自动化运维工具执行流程
2021/06/24 Python
Element实现动态表格的示例代码
2021/08/02 Javascript
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers