bug描述
uni-data-select的下拉列表值localdata
是动态获取的,且绑定了@change
方法,在页面加载后,请求localdata
的列表数据,给localdata
重新赋值,此时发现自动触发了@change
方法
当前uni版本:^2.0.2-3070920230324001 vue2
bug复现过程
页面写个简单的演示代码:
<uni-forms ref="form" :modelValue="formObj" label-position="top" label-width="100%">
<uni-forms-item label="绑定单位:">
<uni-data-select
v-model="formObj.tenantId"
:localdata="tenantList"
placeholder="请选择绑定单位"
@change="changeTenant"
></uni-data-select>
</uni-forms-item>
</uni-forms>
export default {
data() {
return {
tenantList: [],
formObj: {
tenantId: null,
},
}
},
methods: {
changeTenant(e) {
console.log('uni-data-select改变了')
},
}
}
这样写没啥事,此时localdata
绑定的是个静态值,下面我们改变一下localdata
(想当于实际业务中的获取接口值)
我们在created()
中改变该值:
setTimeout(() => {
this.tenantList = [
{ value: 1, text: '中国移动', },
{ value: 2, text: '中国联通', },
]
}, 1000)
这时你会发现,已经自动触发@change
方法了,而且还触发了两次
解决方案
这是组件的问题,没法从根源解决
其他方案
不要使用组件的@change
方法,自己用watch
监听值变化吧