前言

提前說明哦，這是一篇很基礎(chǔ)類的文章，只適合小小白閱讀，因?yàn)橐韵挛恼聝?nèi)容來源于我剛?cè)胄袝r(shí)的筆記。各位高人請(qǐng)繞道，避免浪費(fèi)時(shí)間，謝謝~

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

問題

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

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

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

網(wǎng)上的解決方案

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

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

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

還有需要注意的是：

radio的值默認(rèn)應(yīng)該是string類型，如果后臺(tái)返回的值是int類型，radio同樣不會(huì)默認(rèn)選中。

總所周知，在引用js對(duì)象時(shí)，引用的其實(shí)是一個(gè)索引地址，也因此前端才延伸出深拷貝淺拷貝的所在，當(dāng)對(duì)象內(nèi)只發(fā)生改變時(shí)，索引值其實(shí)是不變的，即舊值與新值相同，因?yàn)樗鼈兯饕赶虻亩际峭粋€(gè)對(duì)象。

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

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

最新評(píng)論