【ant-design-vue】a-select无法清空的解决

版本:^3.0.0

<a-select
  v-model="selectValue"
  :options="options"
  show-search
  placeholder="输入内容"
  :filter-option="false"
  @search="handleSearch"
  @change="handleChange"
>
  <template v-if="fetching" #notFoundContent>
    <a-spin size="small" />
  </template>
</a-select>

需求是在选择的值不满足要求的时候,不做任何处理,清空select,但是意外发现selectValue竟然无法清空,在dom里面也打印了selectValue,发现明明是''了,但是a-select里面却还是有值

let selectValue = ref('')
const handleChange = () => {
	if() {
		selectValue.value = '' 
		return false
	}
}

解决:原因是啥不清楚,给v-model="selectValue"改成v-model:value="selectValue"就行了

<a-select
  v-model:value="selectValue"
  :options="options"
  show-search
  placeholder="输入内容"
  :filter-option="false"
  @search="handleSearch"
  @change="handleChange"
>
  <template v-if="fetching" #notFoundContent>
    <a-spin size="small" />
  </template>
</a-select>

注意:但这会带来一个新的问题,placeholder里面的文字不显示了,这是因为:placeholder的作用是当selectValue值为空时显示的替换文本,但是默认值给''和null都会被视为有值,所以把selectValue的初始值改成undefined

let selectValue = ref(undefined)
const handleChange = () => {
	if() {
		selectValue.value = undefined 
		return false
	}
}

还有一个诡异的问题:就是使用v-model:value,如果options的label是由文字+数字拼成的,在远程搜索的时候,搜时能搜,但是选中以后,不会触发change事件,但是改成v-model就好了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值