The el-select drop-down box of Vue stepping on the pit: After the data is echoed, the assignment problem cannot be selected

Drop-down box bug:

After the data is echoed, the assignment problem cannot be selected

as the picture shows:

 

When console.log(val), you can get the ID of the selected value, but it is not assigned to the box

 

 Solution:

In the change event of the drop-down box, add the following code

<el-select v-model="formLabelAlign.def_area_id" 
        placeholder="请选择区" @change="getSchool" >
     <el-option v-for="item in areaList" 
        :key="item.id" :label="item.name" :value="item.id">
    </el-option>
</el-select>

 getSchool(val) {
    console.log(val)
    //解决：el-select下拉框多选，选择后赋值成功，输入框不显示选中的值
    this.$nextTick(() => {
        this.$forceUpdate()
    })
 }

As shown in the picture, the problem has been solved 

 

Applied knowledge points:

$nextTick

Function: nextTick() in vue is to execute a delayed callback after the next DOM update cycle ends, use $nextTick() after modifying the data, you can get the updated DOM in the callback.

forceUpdate

Function: It is pointed out in the official Vue documentation that $forceUpdate has the function of forcing refresh, forcing the vue instance to re-render the virtual dom. Note that it only affects the instance itself and the subcomponents inserted into the slot content, not all subcomponents .