element-ui 表单元素绑定初始值,异步重置后 resetFields 为什么一直是回到 异步后的数据状态

末子
  • 63
<script language="JavaScript">
    var app = new Vue({
        el: '#appContainer',
        data: {
            form: {
                name: '',
                parent_id: 0,
                icon: '',
                taxis: 0
            }
        },
        methods: {
            resetForm: function(formName){
                this.$refs[formName].resetFields();
            },
            cateEdit: function(idx,row){
                this.editTradeCategory = true;
                axios.post('/api.php/……',{
                    id: row.id
                }).then(function(res){
                    var result = res.data;
                    if(result.code === 1){
                        app.$data.form = result.data;
                    }
                });
            }
        },
        created: function(){
            
        }
    })
</script>

新增 和 编辑,使用的是一个 from ,编辑的时候,先加载该记录数据
我的问题是
页面加载完以后,如果我直接点击新增,那么往后我清空表单元素都是正常的,而如果我先编辑某条记录,那往后无论再进行啥操作,重置表单只能重置到第一次编辑的数据状态,而不是 data.form 默认的空值

这是为什么,有什么好的解决方案

回复
阅读 2.5k
2 个回答
  1. 使用 this.$refs 而不是 this.$ref
  2. 配合使用 this.$nextTick(() => {})
  3. el-form 中的 model / ref 以及 el-form-item 中的 prop 再检查一遍吧

2020年6月30日 10:55:49

是要用set来修改对象的属性值吧,比如你要修改name你要$set(form, name, "xxx") (伪代码)

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏