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

Question

<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 默认的空值

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

Answer 1

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

---

2020年6月30日 10:55:49

Answer 2

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