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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用vue的keep-alive导致input输入框无法输入和粘贴相关的知识,希望对你有一定的参考价值。

参考技术A

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

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

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

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

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

如下:

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

vue input 输入框聚焦

参考技术A 最近在用element ,需求是 在表格里嵌套输入框:

点击显示:

失焦隐藏:

有个问题,就是输入框显示后不会自动focus,这就会导致输入框显示之后在点击别处不会自动隐藏,因为不会触发blur事件,要解决这一问题只能在显示输入框是就触发focus,于是百度,
感谢 https://www.jianshu.com/p/8b9d65096566 这篇文章。

然而对我来说并没有用,后来发现问题出在我用的是el-input组件,element会在input外面套上一层,然后。。加上JQ。。就是在el往下找一下input并让它聚焦(或者直接用原生js也行,因为我这个是混用,之前就引用的jq,所以为了方便直接用了jq)

以上是关于使用vue的keep-alive导致input输入框无法输入和粘贴的主要内容,如果未能解决你的问题,请参考以下文章

vue keep-alive 不生效和多级(三级以上)缓存失败

local storage

在React中实现和Vue一样舒适的keep-alive

vue input 输入框聚焦

vue项目使用keep-alive的作用

vue中动态组件的使用及相关问题