Home >> Element Select选项框无法清空

Element Select选项框无法清空

2023-03-10 12:07 AtmosphereMao

Vue 表单清空 v-model 和 option下拉框选项 导致无法select选中

问题

在编写Vue表单选择框更新数据时,表单有两个字段分别是project_iduser_idproject_id随着user_id的选择而更新数据,例如:当我选择user_id1时,project_id出现1,2,3,当我选择2时,出现4,5,6。现在的情况是,当我user_id选择1时,project_id选择2时,此时我更改user_id2project_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时强制更新视图即可解决。

评论


暂无评论


* 登录后即可评论

©2022 联系我们

粤ICP备2022023863号
500x500