手动清空Element Select选择框内容 v-model 和 option下拉框选项 导致无法select选中,或者选中视图不渲染问题,

有时候一些需求,需要上下两个Select 进行联动,比如
手动清空Element Select选择框内容 v-model 和 option下拉框选项 导致无法select选中,或者选中视图不渲染问题,_第1张图片
名称/id选择框的内容需要根据 科目选中后的内容,来进行搜索,所以当 科目清空后 名称/ID 需要清空 v-model 的值。以及 el-option下拉框的选项。
手动清空Element Select选择框内容 v-model 和 option下拉框选项 导致无法select选中,或者选中视图不渲染问题,_第2张图片
可以通过 来动态实时清空下拉框。

然后通过Change 事件 来清空 v-model 值,如果通过Change事件手动清空v-model 值后导致 该选择项出现 Select无法选中 / 明明已经拿到选中数据了,但是视图没有渲染/ 已经渲染了,值也拿到了,但是 没有通过 Select表单校验,使用该方法可以完美避开该问题。
问题出现原因:不正确的赋值导致的。 在回显页面数据赋值时,深层次的数据赋值时建议使用 this.$set来赋值,如果要把该属性设置成原始状态时,尽量保持与data中定义的初始值一致.
手动清空Element Select选择框内容 v-model 和 option下拉框选项 导致无法select选中,或者选中视图不渲染问题,_第3张图片
手动清空Element Select选择框内容 v-model 和 option下拉框选项 导致无法select选中,或者选中视图不渲染问题,_第4张图片

你可能感兴趣的:(vue,element,js,javascript,vue.js,html,html5)