关于antd前端组件a-select组件选择无效的问题处理记录

大象是堵墙

在使用公司的信息系统时，偶然发现一个下拉组件选择无效，于是看一下前端页面的代码。

前端页面是基于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()来定义。

问题解决了，在此记录一下。

来源：https://www.cnblogs.com/ithome8/p/19553501