首页 > 其他分享 >重读vue电商网站6之如何重置表单

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

时间:2023-02-11 14:02:33浏览次数:42  
标签:vue 重置 表单 实例 按钮 如下 电商 我们


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

获取表单对象方式如下:

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

 

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

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

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

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

 

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

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


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

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

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

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

标签:vue,重置,表单,实例,按钮,如下,电商,我们
From: https://blog.51cto.com/u_15460007/6050260

相关文章