解决el-form部分字段在输入的时候被带着走的问题

大家好，我是南宫，很久没有更新博客了。现在来更新一个最近解决的问题。

问题是这样的：

我百度了半天没有找到类似情况的博客，所以自己记录了一篇，希望能帮到有类似困惑的小伙伴。

注意看，问题是这样复现的：

① 在表单里输入信息

② 点击取消按钮，重置或清空了表单。

③ 再次编辑表单（用v-show而不是v-if控制表单的显示隐藏），发现部分字段编辑的时候内容没有被修改，但是修改了另一个字段后，前一个字段的内容修改成了刚才的样子。

这里我可以举例说明：

假设有一个字段叫“姓名”，是输入框，你在输入的时候输入了“张三”，但是输入框没有变化。

假设下面还有一个字段叫“学校”，也是输入框。你在输入完姓名，但是没有变化的时候，在学校这里输入了“师大”，结果你发现，在“师大”出现在“学校”这里后，“张三”同时也出现在了“姓名”这里。

（很遗憾没有动图演示环节，只能用文字举例了）

这个问题我

问题可能是因为你写了类似的代码：

this.form = {}

请注意，初始化的时候如果用到了el-form，你用form对象来控制这个表单，用form对象里面的元素来绑定里面的表单控件的v-model的话，建议要在data定义的时候和初始化form的时候写上form里面要使用的属性。否则会有编辑表单以后，数据响应式更新不够及时的问题。也就是我这里说的“被带着走”。

<el-input v-model="form.name" placeholder="请输入姓名">el-input>

data() {
  return {
   form: {
     name: '', // 这里要定义需要使用的对象，这样才能及时响应式更新数据
   },
}

希望能帮到大家。