Home >> Element Select选项框无法清空
Element Select选项框无法清空
2023-03-10 12:07 AtmosphereMao
Vue 表单清空 v-model 和 option下拉框选项 导致无法select选中
问题
在编写Vue表单选择框更新数据时,表单有两个字段分别是project_id
与user_id
。project_id
随着user_id
的选择而更新数据,例如:当我选择user_id
为1
时,project_id
出现1,2,3
,当我选择2
时,出现4,5,6
。现在的情况是,当我user_id
选择1
时,project_id
选择2
时,此时我更改user_id
为2
,project_id
列表为4,5,6
,我project_id
所选择的2
应该被清空
changFormUser(){
const self = this
self.getProjectByID(1) // 更新project_id内容
self.form.project_id = null; // 清空project_id
self.site_form_project = []
for (var i = 0; i < self.source_option_select.length; i++) {
if (self.source_option_select[i]['uid'] == self.form.uid) {
self.site_form_project.push(self.source_option_select[i])
}
}
},
以上功能跑完后,列表有更新,但选择框的选择项没能清空以及也不能选择新的选项
解决方案
changeProject(){
this.$forceUpdate();
},
通过测试,发现其实表单中project_id
已经更新了,但是视图没有刷新,通过以上方法绑定到project_id
的选择框@change
中,在更改project_id
时强制更新视图即可解决。
评论
暂无评论
* 登录后即可评论