前言

提前說明哦，這是一篇很基礎類的文章，只適合小小白閱讀，因為以下文章內容來源于我剛入行時的筆記。各位高人請繞道，避免浪費時間，謝謝~

今天主要來談一下element-ui編輯表單中的el-radio回顯之后無法選擇的問題，主要涉及到vue的雙向綁定，以及element-ui編輯表單中的el-radio的默認類型。

問題

這是一個困擾了我半上午的bug，表單樣式及代碼如下。

問題是回顯數(shù)據(jù)之后，當我點擊其他的radio想要選擇的時候，勾選不了。

在網上找到了一樣的問題，有解決方案，同樣沒有找到原因。

網上的解決方案

原本是把從后臺得到的數(shù)據(jù)res.data直接賦值給editPowerForm，現(xiàn)在需要先把res.data賦值給let obj，然后再由obj賦值給editPowerForm，就可以了。

原因是editPowerForm沒有聲明radio這一變量，vue中對數(shù)據(jù)雙向綁定的支持限于基本添加刪除的方法，詳情看官網。在這里相當于直接賦值給未聲明的變量，所以雙向綁定不會被vue監(jiān)聽，即沒有刷新。而先賦值給obj，相當于radio在被賦值前已經被聲明了，所以可以被雙向綁定監(jiān)聽到。

說的有點繞，總之就是對象的某個屬性要先被創(chuàng)建，才能被vue雙向綁定監(jiān)聽到。

還有需要注意的是：

radio的值默認應該是string類型，如果后臺返回的值是int類型，radio同樣不會默認選中。

總所周知，在引用js對象時，引用的其實是一個索引地址，也因此前端才延伸出深拷貝淺拷貝的所在，當對象內只發(fā)生改變時，索引值其實是不變的，即舊值與新值相同，因為它們索引指向的都是同一個對象。

其實直接使用$set，或者watch進行深度監(jiān)聽也是可以的。慶幸的是，現(xiàn)在vue3中使用proxy代理來實現(xiàn)雙向綁定，再也不用擔心數(shù)組/對象發(fā)生變化卻監(jiān)聽不到的問題了！

到此這篇關于element編輯表單el-radio回顯之后無法選擇的問題解決的文章就介紹到這了,更多相關el-radio回顯無法選擇內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！