?

element-ui?對表單提供了如下方法?resetFields，我們只需要獲取表單對象數據即可重置我們的表單。

獲取表單對象方式如下：

直接在表單處添加?ref屬性，如下?loginFormRef，此引用即為我們表單實例。

然后，在我們重置按鈕處，通過?@click?給按鈕綁定一個事件

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

不難發現，此時的?this?指向的就是我們當前登錄組件?login.vue的實例對象。

觀察上圖，我們看到有一個?$refs?屬性，這個就是我們的表單實例。

?

：

此時，我們的方法就可以改寫成如下方式

最后，我們點擊重置按鈕后，會發現輸入框并不是完全清空了，原因是data數據里面一開始我們設置了默認值，因此resetFields()函數就是清空為默認值。

總結

以上是生活随笔為你收集整理的前端学习（2685）：重读vue电商网站6之如何重置表单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。