【报Bug】uni-data-select选完值之后不显示清除已选项图标

分类：uni-app

bug已确认

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： Windows 10 专业版

HBuilderX类型：正式

HBuilderX版本号： 4.15

手机系统： iOS

手机系统版本号： iOS 17

手机厂商：苹果

手机机型： iPhone 13

页面类型： vue

vue版本： vue2

打包方式：云端

项目创建方式： HBuilderX

示例代码：

<uni-data-select v-model="orgDeptUids" placeholder="全部科室" :localdata="deptList" @change="deptChange" />  

deptChange(e) {  
      e ? (this.orgDeptUids = e) : (this.orgDeptUids = '')  
      this.$refs.paging.reload()  
   },

操作步骤：

运行到真机上就有

预期结果：

和官网示例一致

实际结果：

在真机上IOS、Android上都会出现uni-data-select选择数据后不显示清除已选项图标

bug描述：

在浏览器h5模拟器中一切正常，运行到真机上IOS、Android上都会出现uni-data-select选择数据后不显示清除已选项图标

2024-07-22 10:53 负责人:BFC 分享

4 个回复

2***@qq.com

同样遇到这个问题，阅读了下uni-ui的源码，发现是如下两个问题导致的

已提交pr: https://github.com/dcloudio/uni-ui/pull/942

内部组件的bug: 点清除icon其实值已经清除了，但是界面上显示值 (this.current) 忘了更新
解决方案：clearVal函数中清除 this.current
```
clearVal() {  
    this.emit('')  
    this.current = '' // 添加此行  
    if (this.collection) {  
        this.removeCache()  
    }  
}
```
uniapp 内部bug: vue2 误认为两个不同的<view><icon/></view>是一样的，所以其实代码逻辑已经让他显示 x 了，但是界面上响应式认为没变化，就还是之前的icon，目前能做的就是加个 key 明确这两个组件是不同组件
解决方案：给两个<uni-icons>的上层<view>添加不同key属性
```
<view key="clear-button" v-if="current && clear && !disabled" @click.stop="clearVal">  
    <uni-icons type="clear" color="#c0c4cc" size="24" />  
</view>  
<view v-else>  
<view key="arrow-button" v-else>  
    <uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" />  
</view>
```