element編輯表單el-radio回顯之后無法選擇的問題解決
前言
提前說明哦，這是一篇很基礎類的文章，只適合小小白閱讀，因為以下文章內容來源于我剛入行時的筆記。各位高人請繞道，避免浪費時間，謝謝~
今天主要來談一下element-ui編輯表單中的el-radio回顯之后無法選擇的問題，主要涉及到vue的雙向綁定，以及element-ui編輯表單中的el-radio的默認類型。
問題
這是一個困擾了我半上午的bug，表單樣式及代碼如下。
問題是回顯數(shù)據(jù)之后，當我點擊其他的radio想要選擇的時候，勾選不了。
在網(wǎng)上找到了一樣的問題，有解決方案，同樣沒有找到原因。
網(wǎng)上的解決方案
原本是把從后臺得到的數(shù)據(jù)res.data直接賦值給editPowerForm，現(xiàn)在需要先把res.data賦值給let obj，然后再由obj賦值給editPowerForm，就可以了。
原因是editPowerForm沒有聲明radio這一變量，vue中對數(shù)據(jù)雙向綁定的支持限于基本添加刪除的方法，詳情看官網(wǎng)。在這里相當于直接賦值給未聲明的變量，所以雙向綁定不會被vue監(jiān)聽，即沒有刷新。而先賦值給obj，相當于radio在被賦值前已經(jīng)被聲明了，所以可以被雙向綁定監(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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue reactive函數(shù)實現(xiàn)流程詳解
一個基本類型的數(shù)據(jù),想要變成響應式數(shù)據(jù),那么需要通過ref函數(shù)包裹,而如果是一個對象的話,那么需要使用reactive函數(shù),這篇文章主要介紹了Vue reactive函數(shù)2023-01-01
ant design vue datepicker日期選擇器中文化操作
這篇文章主要介紹了ant design vue datepicker日期選擇器中文化操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了vue數(shù)組去重的12種方法示例全面詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
這篇文章主要為大家介紹了前端面試之vue2和vue3的區(qū)別有哪些，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
vue實現(xiàn)圖片下載點擊按鈕彈出本地窗口選擇自定義保存路徑功能
vue前端實現(xiàn)前端下載,并實現(xiàn)點擊按鈕彈出本地窗口,選擇自定義保存路徑,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12
這篇文章主要為大家詳細介紹了vue swipe自定義組件實現(xiàn)輪播效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要介紹了VUE.CLI4.0配置多頁面入口的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
這篇文章主要介紹了Vue組件模板的幾種書寫形式(3種)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
這篇文章主要介紹了vue數(shù)組中不滿足條件跳出循環(huán)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要給大家介紹了關于如何用Vue3切換中英文顯示的相關資料,在Vue3中使用vue-i18n進行國際化設置,包括安裝、配置、在組件中使用$t方法獲取翻譯字符串,以及可選的動態(tài)加載語言包以提高性能,需要的朋友可以參考下2024-11-11