根据你提供的代码，待选状态和已选状态的逻辑看起来大致正确，但是有一些可能导致已选状态没有在页面上展示的问题。下面是可能的原因及其解决方案：
targetKeys和selectedKeys的初始化：- 在
fetchSelectedTags()函数中，你将selectedKeys.value和targetKeys.value设置为相同的值。如果初次加载后，数据未能成功获取（例如，接口调用失败），则这两个值都不会被正确设置。 - 解决方案：确保从服务器获取标签时返回的数据是正确的，并检查是否成功加载了。
- 在
数据源不匹配：
- 确保从
queryTagList()获取到的dataSource中包含了你在之前步骤中设置的 key 值。也就是说，确保这些 key 是存在于 dataSource 数组中并且与 selectedKeys 相对应。 - 可以在控制台打印出
dataSource.value和selectedKeys.value来确认它们之间是否存在匹配。
- 确保从
组件渲染时机问题：
- Vue 的 reactivity 系统可能会因为异步请求而导致某些状态更新没有及时反映。在 mounted 钩子中，如果先调用了 fetchAvailableTags()，再调用 fetchSelectedTags()，可能会出现此类问题。
- 解决方案：考虑在一个方法中串联这两个 API 调用，以确保首先获得可用标签，然后再处理已选标签。
UI 绑定问题：
- 确保
<a-transfer>组件中的 v-model 与实际使用的 ref 变量绑定正确，并且没有拼写错误或者名称冲突。
- 确保
生命周期钩子：
- 确保你是在合适的生命周期钩子中进行操作，例如 onMounted。你可以尝试添加一些日志来调试数据流动以及何时更新了这些变量。
改进后的部分代码示例
const onMounted = async () => {
custId.value = route.query.custId;
name.value = route.query.name;
await fetchAvailableTags(); // 等待获取可用标签
await fetchSelectedTags(); // 然后再获取已选择标签
};
同时，在 fetchSelectedTags() 函数结束后，可以添加一些 log 输出以确认数据是否按预期加载：
console.log("Selected Keys:", selectedKeys.value);
console.log("Target Keys after fetching:", targetKeys.value);
这样有助于诊断为何 UI 没有按照预期反映所需的数据。希望以上分析和建议能够帮助到你！
内容由零声教学AI助手提供，问题来源于学员提问
![if (item.code === loan'){
for(const loan of item.child){const Index= loan.path.split('.')[1]let contractCode;
me.overDueInfoIndexloan.pathl=Index
const child overduePeriod = loan.child.find(val =>val.code ===](https://linuxcpp.0voice.com/zb_users/upload/2023/05/202305162214111445370.png)
![[E/kernel.sched] thread:tidle0 stack overflow](https://linuxcpp.0voice.com/zb_users/upload/2023/05/202305162232254655144.png)
