el-select 的 v-model 绑定了一个对象，通过 clearable 清空后类型发生变化

1 问题描述

如下代码所示，v-model 中绑定的值是对象类型，给 el-select 添加 clearable 属性后，当点击 × 清空选择器中选中的选项后，经过 console.log(typeof (taskType.selectedTaskType)) 打印发现 v-model 绑定的值的类型由 object 变为了 string。

<el-select
	clearable
    v-model="taskType.selectedTaskType"
    value-key="value"
    placeholder="请选择任务类型"
    @change="(val) => handleSelectChange(val)"
>
	<el-option
    	v-for="item in taskType.taskTypeList"
        :key="item.value"
        :label="item.name"
        :value="item"
    ></el-option>
</el-select>

2 引发原因

Element Plus 处理 el-select 清空选项的源码如下：

handleClearClick(event) {
    
    
	this.deleteSelected(event);
},

deleteSelected(event) {
    
    
	event.stopPropagation();
	const value = this.multiple ? [] : '';
    this.emit('input', value); 
    this.emitChange(value); 
    this.visible = false; 
    this.emit('clear');
}

通过源码可以当点击 × 清空后，value 被赋值为空字符串 ‘’。

3 解决方法

重写 el-select 的 clear 事件，给 value 重新赋值。

<el-select
	...
	@clear="taskType.selectedTaskType = { value: '', type: '' }"
></el-select>