????????在使用 Vue 框架開發項目時，Element UI 是常用的組件庫。最近在開發中遇到了 Element 單選框組件el-radio的雙向綁定問題，直接復制element官網上的的案例下來也是不得，經過調試和探索，終于找到了解決方案，特此記錄分享。

下圖是官方文檔的代碼

一、問題描述

?????在一次編程中需要使用 Element 的單選框組件，于是直接復制了 Element 官網上的案例代碼

????????然而在頁面上呈現時，卻出現了異常情況：要么選不了，要么多個同時選中，使用vue-devtool工具查看，雙向綁定的值變成了空置，并不是我們設置的value的值

二、問題分析

????????經過仔細查閱 Element 組件文檔和調試發現，el-radio組件實際上是通過label屬性來指定當該單選框被選中時綁定值v-model應設置的值，而不是value屬性。官方文檔中的示例可能存在一定的誤導性，或者是在特定版本中有不同的用法，導致直接復制代碼后出現雙向綁定失效的問題。

????????另外，當雙向綁定的數據是對象類型時，在 Vue 3 中需要使用reactive函數來創建響應式對象，以確保數據的響應式效果。如果使用不當，也可能導致數據無法正確更新。

三、解決方案

將el-radio組件的value屬性修改為label屬性，代碼如下：

          <el-radio-group v-model="smsForm.messageType"><el-radio label="1" border>手機短信</el-radio><el-radio label="2" border>郵箱</el-radio></el-radio-group>

確保在定義包含雙向綁定數據的對象時，使用reactive函數來創建響應式對象

const smsForm = reactive({messageType: null
})

至此問題解決