Vue-element 的 resetFields();

 在使用中,发现 this.$refs['activityForm'].resetFields();经常不好使,放在简单页面中可以使用,一旦复杂就坑多多!

我的form在一个dialogue 中,界面上有2个按钮,一个是添加,一个是修改。

界面加载之后,点击添加,再点修改没问题。

先点修改,会把要修改的数据加载到弹出的对话框上。但是这个界面上的值竟然被记住了!

再点击添加框,this.$refs['activityForm'].resetFields();的执行结果,竟然是刚才的对话框上的内容,不管怎么修改,以后this.$refs['activityForm'].resetFields();的执行结果还是一样的!

后来的解决方法是

点击修改按钮,把要加载到对话框上的代码放到timer里!

 OpenEditDialog: function(row)
        {
            if(row!=null)//如果是编辑
            {
                this.activity.dialogVisible=true;//显示对话框。
                setTimeout(function(){ 
                    this.activity.dialogTitle="编辑活动";
                    this.activity.Name=row.Name;
                    this.activity.Code=row.Code;
                    this.activity.StartTime=new Date(parseInt(row.StartTime.toString().replace(")/",'').replace("/Date(",'')));
                    this.activity.EndTime=new Date(parseInt(row.EndTime.toString().replace(")/",'').replace("/Date(",'')));
                     
                    this.activity.Id=row.Id;
                    this.activity.plateform_coin=[row.PlatformId,row.CoinId];


                    this.activity.ThirdPlatformCoinUnit=row.ThirdPlatformCoinUnit;
                    this.activity.TargetCoinUnit=row.TargetCoinUnit;
                    this.activity.validateType=row.ValidMonth>0?'month':'day';
                    this.activity.ValidMonth=row.ValidMonth==0?"12":row.ValidMonth;
                    this.activity.ValidDay=row.ValidDay==0?"365":row.ValidDay;
                    this.activity.Desription=row.Desription;
                }.bind(this), 0);
            }
            else//如果是添加,全部清空
            { 
                this.activity.dialogVisible=true;//显示对话框。  
                this.$refs['activityForm'].resetFields();
                   this.activity.ValidMonth=12;
                   this.activity.ValidDay=365;
                   this.activity.validateType='day';
            }

        },

这样就行了。具体原因再学习!

你可能感兴趣的:(前端)