重读vue电商网站6之如何重置表单

element-ui 对表单提供了如下方法 resetFields，我们只需要获取表单对象数据即可重置我们的表单。

获取表单对象方式如下：

 

直接在表单处添加 ref属性，如下 loginFormRef，此引用即为我们表单实例。

然后，在我们重置按钮处，通过 @click 给按钮绑定一个事件

下一步，添加方法，我们可以打印一下 this

 

不难发现，此时的 this 指向的就是我们当前登录组件 login.vue的实例对象。

观察上图，我们看到有一个 $refs 属性，这个就是我们的表单实例。

 

此时，我们的方法就可以改写成如下方式

    最后，我们点击重置按钮后，会发现输入框并不是完全清空了，原因是data数据里面一开始我们设置了默认值，因此resetFields()函数就是清空为默认值。