引言
本文解決 for 循環中對表單進行渲染的問題, 在這種情況下獲得表單的方法會得到一個數組而不是對象, 直接使用 validate 方法會報錯; 另外通過斷點調試了一下得到的結果, 發現確實是一個數組對象, 而且數組長度正式被渲染的表單數.
原文地址: http://blog.duhbb.com/2022/02/16/error-occurs-when-form-is-loop-generated/
歡迎訪問我的博客: http://blog.duhbb.com/
循環渲染 form
記錄 elementui 中 form 使用的一個坑: 當使用循環渲染來同時使用多個 form 的時候, 直接使用官方示例代碼來使用 form 的方法會報錯, 正確的寫法是這樣:
this.$refs[form][0].validate()
注意重點是后面加了數組取第 1 位的寫法, 因為此時直接用 form 的 ref 名字去尋找它的時候會發現返回了一個數組, 用 this.$refs[form] 的寫法就會出現找不到對象的情況.
以上內容來自: https://blog.csdn.net/github_37673306/article/details/108710979
原因探討
難道是因為模板中渲染了多個 "相同的表單", 而這些表單指向的 data() 中的響應對象是一樣的, 只要有一個表單修改了數據, 其他的表單關聯的數據也會被修改, 所以我們只要取第一個就行了?
項目中的驗證
主要是看下 this.$refs[form] 會得到什么東西.
通過斷點可以看到 this.$refs[form] 得到了一個表單數組, 而且數組的個數恰好是表單渲染的個數.
表單放在循環中生成
Form 組件, 最好不要放到遍歷里面, 不然 ref 里的 formdata 是誰的都不知道.
或者改成
<Form ref='"formdata"+i' :model="formdata" :label-width="120">
其實你這個沒必要去生成兩個表單。而且一個 submit 只能提交一個表單.
表單的其他的坑
另外表單的坑還可以參考下面幾個, 感覺總結比較全面:
結束語
本文解決 for 循環中對表單進行渲染的問題, 在這種情況下獲得表單的方法會得到一個數組而不是對象, 直接使用 validate 方法會報錯; 另外通過斷點調試了一下得到的結果, 發現確實是一個數組對象, 而且數組長度正式被渲染的表單數.
原文地址: http://blog.duhbb.com/2022/02/16/error-occurs-when-form-is-loop-generated/
歡迎訪問我的博客: http://blog.duhbb.com/