场景描述：
罪恶之源
一个dialog弹出框里的form表单里的input框(禁止套娃hhhh)。一框两用，新增和修改功能都用同一个dialog。
新增功能的时候一切正常，在input里删除输入都可以。但是一旦变成修改功能，input就整个废掉，原有的数值无法删除，也无法添加新的内容。
查找了很多资料，大部分人都是在input框的@input事件中用 this.$forceUpdate()强制刷新 解决的
image.png
但是这么解决么得感情呀，强扭的瓜不甜，也没搞懂为什么出现了这个问题，还衍生出了新问题：Input的表单校验失效了！
那些帖子里好多人在哭诉，看来这么改还是有失民心呀，还是得真正解决。
于是我苦思冥想，为啥子同一个框，新增功能能用，修改功能就坏了呢？他们的差别就是修改功能一开始会请求接口并赋值，那么问题一定出现在这里。
仔细观察之后，终于发现问题所在
input绑定的值是单独赋值的
一定是因为这个值如此赋值没有被vue监测到，没有经过getter和setter的洗礼，所以视图无法及时更新。
得嘞，改吧就
完美解决
但是我最后还是有点搞不明白的是，这个form.sorts我在data里明明有初始设置，为什么还是会出现这种情况，有清楚的大神麻烦不吝赐教~
image.png
网友评论