使⽤vue的keep-alive导致input输⼊框⽆法输⼊和粘贴
input框禁止输入描述:后台管理系统在app.vue使⽤keep-alive缓存列表页和列表编辑/新增页⾯,在列表页⾯点击新增,新增页⾯可以正常新增,新增完成清除新增页⾯输⼊后返回列表页⾯,然后继续点击新增,跳转到新增页⾯。就是此时,部分的input 输⼊框⽆法输⼊和粘贴。(有部分的输⼊框是可以正常输⼊的,如果先在不能输⼊框input框有输⼊,点击其他可以输⼊的input框后不能输⼊的框会突然出现刚才输⼊的值)
造成这⼀问题的原因初看像是输⼊框虽然能获取焦点被禁⽌了值的输⼊,很怪异的现象,没有做截取和return false操作为何会出现可以获取焦点但是⽆法输⼊呢?但是如果仔细想来,你会发现,其实就是值没有更新!!
到这⾥就要想到vue值的强制更新的⽅法了: vue强制更新$forceUpdate()
添加this.$forceUpdate();进⾏强制渲染,效果实现。搜索资料得出结果:因为数据层次太多,render函数没有⾃动更新,需⼿动强制刷新。
调⽤强制更新⽅法this.$forceUpdate()会更新视图和数据,触发updated⽣命周期。
在使⽤多层for循环嵌套时出现的页⾯没有及时刷新改变后的值的问题——使⽤this.$forceUpdate()
如下:
image.png
我所遇到的就是只有⼀个input输⼊框⽆法输⼊,其他的都是正常的,所以我只在需要的地⽅加,⾄于为什么两个⼏乎⼀样的输⼊框有⼀个在连续两次新增出现问题⽽其他的都是好的,我还在继续溯源,如果有知道问题的⼤佬路过请不吝赐教,谢谢!