form表单数据回显双向绑定失效的原因

问题描述

点击修改按钮，回显表单数据的时候，假设第一个下拉框为1的时候显示另一个下拉框，这个时候我点击另一个下拉框的时候没反应，不知道为什么， 一开始我以为又是element组件库的问题，后来发现不是

代码分析

伪代码

1. 点击修改按钮的方法里 我直接用row给这个表单赋值了

this.user_form.id = row.id
this.user_form = {...row}

2. 然后在点击第一个下拉框的change回调方法里，我直接给另一个下拉框双向绑定的值赋值空

this.user_form.authorizeType = ''

3. 这个时候我去操作另一个下拉框的时候 就点不动

问题分析

其实这个问题和vue双向数据绑定（object.defineproperty ）有关，因为我表单user_form的authorizeType的默认值是null，当我点击修改的时候，我将row赋值给user_form,因为之前这个值是没有的，是null，所有不触发setter方法，所以我点击下拉框的时候就点不动。

解决问题

在点击第一个下拉框的时候，显示另一个下拉框给表单赋默认值的时候，不使用this.user_form.authorizeType = ''这种方式，使用$set方法，为表单添加一个响应式的属性，就可以实现双向数据绑定了。