场景

两个el-select 联动的选择框，选完第一个框异步加载第二个框的选项列表并给第二个选项赋值为选项的第一个值

<template>
    <el-select
        v-model="formData.data1"
        @change="onChange"
    >
        <el-option
          v-for="item in option1"
          :key="item.id"
          :label="item.label"
          :value="item.value"
        ></el-option>
    </el-select>

    <el-select
        v-model="formData.data1"
        @change="onChangeProject"
    >
        <el-option
          v-for="item in option1"
          :key="item.id"
          :label="item.label"
          :value="item.value"
        ></el-option>
    </el-select>
</template>

<script>
	export default {
		data() {
            return {
                formData: {},
                option1 = []
                : [],
                option2: [],
            }
        },
        
        method: {
            onChange() {
                this.$set(this.formData, 'data2', undefined)
                this.option2 = []
                Request('post', 'xxxxx').then(res => {
                    this.option2 = res.data
                    this.$set(this.formData, 'data2', this.option2[0].id)
                })
            }
        }
    }
</script>

示例


切换第一个选项之后如果在很短的时间内去点击第二个选项框，
第二个选项的值为空但是选项中已选中，或者会出现直接渲染出value值的情况。

解决方案

网上看了很多方法，使用this.$set value值和选项中的value数据类型不同等等
最后的解决方案是：

 onChange() {
                this.$set(this.formData, 'data2', undefined)
                this.option2 = []
                Request('post', 'xxxxx').then(res => {
                    this.option2 = res.data
                   setTimeout(() => {
                    	this.$set(this.formData, 'data2', this.option2[0].id)
                    }, 0)
                })
            }

在setTimeout中对formData进行赋值