Vue 将el-select值置空后出现无法选择问题分析

1. 需求分析

• 需求
  两个下拉框，第一个下拉框选择不同选项后，第二个下拉框出现的值不同
• 解决需求方法
  这里采用watch监听第一个下拉框选项，根据其值将第二个下拉框用filter进行过滤显示，若第二个下拉框存在值，则将其值做置空处理。
• 出现问题
  第一个下拉框选择某些值后，发现第二个下拉框无法选择，变成了单项绑定，在vue-devtool中可以看到其值变化，但下拉框却不显示。

2. 解决办法

• 1. 在第二个下拉框里加个属性@change="this.$forceUpdate()进行强制渲染。

  但采用这个方法后面发现，即便能选上值了，表单校验的提示无法消除，但可以保存成功，很奇怪。

• 2. 在watch中将this.formData.value=''改为delete this.formData.value

  使用这个方法，目前没有再出现上述错误
• 3. 用this.$set