Recently, I discovered the el-select drop-down box while working on a project. After selection, the value was assigned successfully, but the selected value was not displayed on the box.
Later, after checking the official documentation, I found the reason:
Vue cannot monitor changes in dynamically added properties, and $set needs to be used to assign values to these properties.
As shown in the figure above, the operator drop-down box initially has no value. After selecting the operation team, the operator drop-down box is filled in by obtaining background data based on the selected team.
Then the problem was discovered: after selecting the operator, the input box still had no value, but the bound @change event currOperatorChange printed the selected value.
Solution: Use $set to assign values.
As follows:
<el-row>
<el-col :span="12">
<el-form-item prop="deptId"
:label="$t('taskManage.lockTask.deptId')+':'">
<treeselect :placeholder="$t('taskManage.lockTask.selDeptId')"
:options="deptTree"
:normalizer="normalizer"
v-model="formData.deptId"
@select="selectDepart">
</treeselect>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="operateId"
:label="$t('taskManage.lockTask.table.operateName')+':'">
<el-select clearable
v-model="formData.operateId"
@change="currOperatorChange"
:placeholder="$t('taskManage.lockTask.selOperateName')">
<el-option v-for="item in operateOption"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
// 操作人选中项发生变化
currOperatorChange(val) {
console.log('操作人选中项发生变化', val)
if (val) {
let obj = {
}
obj = this.operateOption.find(item => {
//这里的operateOption就是上面遍历的数据源
return item.value === val //筛选出匹配数据
})
this.$set(this.formData, this.formData.operateId, val.value)
this.formData.operateName = obj.label
console.log('修改操作人名称', obj.label, obj.value)
} else {
this.formData.operateName = ''
this.$set(this.formData, this.formData.operateId, '')
}
}