在使用公司的信息系統時，偶然發現一個下拉組件選擇無效，於是看一下前端頁面的代碼。
前端頁面是基於ant Design vue組件開發，JS代碼如下，主要用於獲取當前登錄用户所屬的組織機構列表和默認的組織機構
//獲取用户信息 const userInfo = tool.data.get('USER_INFO') //獲取用户歸屬的組織機構列表（有多個） const orgs = userInfo.orgs //獲取默認的組織機構 let myOrgId = userInfo.orgs && userInfo.orgs.length ? userInfo.orgs[0].orgId : 0
下面是下拉選擇的控件代碼，用於選擇當前登錄帳號關聯的部門列表
<a-form-item v-if="orgs && orgs.length" label="指定部門" name="myOrgId" > <a-select v-model:value="myOrgId" :field-names="{ label: 'orgName', value: 'orgId' }" :options="orgs" placeholder="請選擇指定部門"/> </a-form-item>
當前登錄帳號有2個部門可以選擇，但是選擇後，選中的部門沒有變化，還是原來的值。
看上面的代碼，沒有看出哪裏有問題，於是就很奇怪，用change事件記錄了一下選擇是否有變化，發現change事件傳的value是有變化的，但是變量myOrgId是沒有變化的。以前也遇到過這個問題，但是原因是綁定值的變量類型與選項列表的值的變量類型不一致的問題。
這次看了一下代碼，我發現，這裏定義變量沒有使用ref()不是引用類型的，於是將定義變量代碼改為以下代碼
let myOrgId = ref(userInfo.orgs && userInfo.orgs.length ? userInfo.orgs[0].orgId : 0)
變量定義的代碼改了之後，發現問題解決了。後面使用myOrgId變量時，需要使用myOrgId.value獲取值。
總結一下，選擇無效的原因可能有兩個
1、綁定值的變量類型與選項列表的值的變量類型不一致。
2、值類型變量定義時沒有使用ref()來定義。
問題解決了，在此記錄一下。
