Element-ui form element binds the initial value. Why does resetFields always return to the data state after asynchronous reset?

<script language="JavaScript">
    var app = new Vue({
        el: "-sharpappContainer",
        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>

add and edit using a from. When editing, load the record data first
my problem is that after the
page is loaded, if I click add directly, it is normal for me to empty the form elements later, but if I edit a record first, no matter what I do later, the reset form can only be reset to the data state that was edited for the first time, not the default value of data.form

.

Why is there a good solution


  1. use this.$refs instead of this.$ref
  2. with this.$nextTick (() = > {})
  3. model / ref in el-form and prop in el-form-item check it again
< hr >

10:55:49 on June 30, 2020


means to use set to modify the attribute value of an object, for example, if you want to modify name, you want $set (form, name, "xxx") (pseudocode)

Menu