解决vue项目input输入框双向绑定数据不实时生效问题
作者:Beauty_z 时间:2024-05-28 15:42:13
我就废话不多说了,大家还是直接看代码吧~
<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"就好了。
来源:https://blog.csdn.net/Beauty_zhang666/article/details/80051048
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Python Matplotlib数据可视化模块使用详解
![](https://img.aspxhome.com/file/2023/3/81873_0s.png)
在python中实现调用可执行文件.exe的3种方法
Dreamweaver使用中的7个常见问题与解答
防止网站被采集的理论分析以及十条方法对策第1/2页
Python快速生成随机密码超简单实现
![](https://img.aspxhome.com/file/2023/3/77923_0s.png)
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
logging level级别介绍
Python常用数据结构和公共方法技巧总结
![](https://img.aspxhome.com/file/2023/0/124930_0s.png)
Go每日一库之dateparse处理时间
Python实现LRU算法的2种方法
Python关于OS文件目录处理的实例分享
浅谈Python几种常见的归一化方法
![](https://img.aspxhome.com/file/2023/4/66824_0s.gif)
配置python的编程环境之Anaconda + VSCode的教程
![](https://img.aspxhome.com/file/2023/4/79684_0s.png)
Python连接MySQL并使用fetchall()方法过滤特殊字符
Python 输出详细的异常信息(traceback)方式
![](https://img.aspxhome.com/file/2023/3/89283_0s.jpg)
Python+Django+MySQL实现基于Web版的增删改查的示例代码
![](https://img.aspxhome.com/file/2023/2/64252_0s.png)
利用C#远程存取Access数据库
Bootstrap-table自定义可编辑每页显示记录数
![](https://img.aspxhome.com/file/2023/5/132835_0s.png)
Bootstrap导航条学习使用(二)
![](https://img.aspxhome.com/file/2023/3/129583_0s.jpg)