解决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 相关文章推荐
飞鱼(shqlsl) javascript作品集
Dec 16 Javascript
location.href语句与火狐不兼容的问题
Jul 04 Javascript
jQuery实现长按按钮触发事件的方法
Feb 02 Javascript
浅谈Javascript数组的使用
Jul 29 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
Jan 23 Javascript
Boostrap基础教程之JavaScript插件篇
Sep 08 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
Sep 20 Javascript
React数据传递之组件内部通信的方法
Dec 31 Javascript
Bootstrap4如何定制自己的颜色和风格
Feb 26 Javascript
从零开始搭建webpack+react开发环境的详细步骤
May 18 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
Aug 12 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
Sep 01 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
一个oracle+PHP的查询的例子
2006/10/09 PHP
php学习笔记 数组的常用函数
2011/06/13 PHP
php下载excel无法打开的解决方法
2013/12/24 PHP
常用PHP框架功能对照表
2014/10/23 PHP
PHP实现的自定义数组排序函数与排序类示例
2016/11/18 PHP
Laravel关联模型中过滤结果为空的结果集(has和with区别)
2018/10/18 PHP
Opacity.js
2007/01/22 Javascript
window.open()弹出居中的窗口
2007/02/01 Javascript
JavaScript国旗变换效果代码
2008/08/13 Javascript
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
2013/04/24 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
2013/04/26 Javascript
jQuery关于导航条背景切换效果实现示例
2013/09/04 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
2013/12/16 Javascript
javascript原始值和对象引用实例分析
2015/04/25 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
浅谈JavaScript 浏览器对象
2016/06/03 Javascript
jquery表单插件form使用方法详解
2017/01/20 Javascript
JavaScript 栈的详解及实例代码
2017/01/22 Javascript
JS实现去除数组中重复json的方法示例
2017/12/21 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
详解Bootstrap 学习(一)入门
2019/04/12 Javascript
小程序input数据双向绑定实现方法
2019/10/17 Javascript
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
pyecharts调整图例与各板块的位置间距实例
2020/05/16 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
物理教学随笔感言
2014/02/22 职场文书
2014机关干部学习“焦裕禄精神”思想汇报
2014/09/19 职场文书
2015国庆节宣传语
2015/07/14 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书
导游词创作书写原则以及开场白技巧怎么学?
2019/09/25 职场文书
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android
Django框架模板用法详解
2022/06/10 Python
box-shadow单边阴影的实现
2023/05/21 HTML / CSS