Element-ui input输入框无法输入的问题真正解决~

场景描述:

罪恶之源

一个dialog弹出框里的form表单里的input框(禁止套娃hhhh)。一框两用,新增和修改功能都用同一个dialog。

新增功能的时候一切正常,在input里删除输入都可以。但是一旦变成修改功能,input就整个废掉,原有的数值无法删除,也无法添加新的内容。

查找了很多资料,大部分人都是在input框的@input事件中用 this.$forceUpdate()强制刷新 解决的

image.png

但是这么解决么得感情呀,强扭的瓜不甜,也没搞懂为什么出现了这个问题,还衍生出了新问题:Input的表单校验失效了!

那些帖子里好多人在哭诉,看来这么改还是有失民心呀,还是得真正解决。

于是我苦思冥想,为啥子同一个框,新增功能能用,修改功能就坏了呢?他们的差别就是修改功能一开始会请求接口并赋值,那么问题一定出现在这里。

仔细观察之后,终于发现问题所在


input绑定的值是单独赋值的

一定是因为这个值如此赋值没有被vue监测到,没有经过getter和setter的洗礼,所以视图无法及时更新。

得嘞,改吧就

完美解决

但是我最后还是有点搞不明白的是,这个form.sorts我在data里明明有初始设置,为什么还是会出现这种情况,有清楚的大神麻烦不吝赐教~

image.png

你可能感兴趣的:(Element-ui input输入框无法输入的问题真正解决~)