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>