出现情景

• 使用Element UI框架 + Vue2 开发时，经过一些列操作，出现了input输入不上值的问题

情景复现

input输入不上的案例 (haotianheng.github.io)

原因分析

• 查阅了很多资料，最终发现，经过一些列操作之后，input 上 通过 v-model 的值失去了响应性，就是说，打印当前的对象，发现绑定的那个属性没有对应的getter和setter方法。

产生原因

经过一些列实验之后，最终发现：

• 当被绑定的数据没有初始化的时候（即没有设置初始值），我们直接通过js等号赋值的形式给绑定的值初始化，那么被绑定的对象随即失去响应性，同理，若中途被delete删除了，再直接通过js等号赋值的形式初始化，也会失去响应性

上述案例产生原因：input输入不上的案例 (haotianheng.github.io)

• 情况1：在 vue 的 data 中定义dataInfo对象时，初始化时没有设置name属性，而且在函数中，通过等号赋值的形式给dataInfo直接添加name属性并赋值，此时，随即失去响应性，在input框中输入不上去
• 情况2：在 通过input栏输入name值后，name属性是具有响应性的，但是通过delete方法删除name属性（这里为了清空输入，做了删除name属性的操作）后，再通过等号赋值的形式，给dataInfo添加name属性并赋值，此时，同情况1，随即失去响应性，在input框中输入不上去

解决办法

1. 在 data 中 初始化对象时，给需要的属性设置初始值
2. 避免中途通过 delete 删除被绑定的属性后，再赋值的情况，若需要删除对象上的空值属性，可以在最后提交的函数中进行delete操作
3. 使用 this.$set(对象名, '属性名', 值) 的方法给被绑定的数据进行初始化，使被绑定的数据具有响应性