使用vue的keep-alive导致input输入框无法输入和粘

2021-11-15  本文已影响0人  晴天守候

描述:后台管理系统在app.vue使用keep-alive缓存列表页和列表编辑/新增页面,在列表页面点击新增,新增页面可以正常新增,新增完成清除新增页面输入后返回列表页面,然后继续点击新增,跳转到新增页面。就是此时,部分的input输入框无法输入和粘贴。(有部分的输入框是可以正常输入的,如果先在不能输入框input框有输入,点击其他可以输入的input框后不能输入的框会突然出现刚才输入的值)

造成这一问题的原因初看像是输入框虽然能获取焦点被禁止了值的输入,很怪异的现象,没有做截取和return false操作为何会出现可以获取焦点但是无法输入呢?但是如果仔细想来,你会发现,其实就是值没有更新!!

到这里就要想到vue值的强制更新的方法了: vue强制更新$forceUpdate()

添加this.$forceUpdate();进行强制渲染,效果实现。搜索资料得出结果:因为数据层次太多,render函数没有自动更新,需手动强制刷新。

调用强制更新方法this.$forceUpdate()会更新视图和数据,触发updated生命周期。

在使用多层for循环嵌套时出现的页面没有及时刷新改变后的值的问题——使用this.$forceUpdate()

如下:

image.png

我所遇到的就是只有一个input输入框无法输入,其他的都是正常的,所以我只在需要的地方加,至于为什么两个几乎一样的输入框有一个在连续两次新增出现问题而其他的都是好的,我还在继续溯源,如果有知道问题的大佬路过请不吝赐教,谢谢!

上一篇 下一篇

猜你喜欢

热点阅读