iview 刷新滞后于html问题

 

一、问题描述

　　每次刷新页面，下面的内容就会一闪而过。

　　一闪而过后恢复正常：

 

 

 

 

 

 

 

 

 

 

 

 

 

二、解决

　问题代码：

@*<span>修改密码</span>*@
@*<span>{{myWord.personInfo}} </span>*@
改为v-html，在iveiw中方法执行后赋值。
<span v-html="myWord.personInfo"></span>

  data : {

　　myWord:{
　　personInfo: '个人信息',
　　changePassword: '修改密码',
　　submit: '提交',
　　cancel: '取消'
　　},

同样的问题还出现在很多地方。

 

三、完整代码：

?

@{

    ViewBag.Title = "个人中心";

    Layout = "~/Views/Shared/_LayoutNotFooter.cshtml";

}

<style>

        .main-container {

            overflow-y: hidden;

        }

</style>

 

 

<div id="personalCenterDiv">

        <div style="background:#eee;padding:20px" >

 

            <Card style="width:100%;">

                <p slot="title">

                    <Icon type="person"></Icon>

                    @*<span>修改密码</span>*@

                    @*<span>{{myWord.personInfo}} </span>*@

                    <span v-html="myWord.personInfo"></span> 

                                     

                </p>

                <i-form ref="formValidate"   :model="formValidate"  :rules="ruleValidate"   :label-width="100" >

 

                    <form-item label="用户名" prop="UserName">

                        <span v-html="formValidate.UserName"></span> 

                    </form-item>

                    <form-item label="用户类型">

                       

                        <span v-html="formValidate.TypeID"></span>

                    </form-item>

               

                    <form-item label="密码" >                    

                        <i-button type="ghost" v-on:click="modal1=true">

                        <span v-html="myWord.changePassword"></span>

                         </i-button>  

                    </form-item>

                     

                    <form-item label="真实姓名" prop="RealName">

                        <i-input v-model="formValidate.RealName" style="width:300px"></i-input>

                    </form-item>

                    <form-item label="工作单位" prop="Company">

                        <i-input v-model="formValidate.Company" style="width:300px"></i-input>

                    </form-item>

                    <form-item label="出生日期" prop="BirthDate">  

                         <date-picker type="date" v-model="formValidate.BirthDate" ></date-picker>

                    </form-item>

                    <form-item label="手机" prop="Phone">

                        <i-input v-model="formValidate.Phone" style="width:300px"></i-input>

                    </form-item>

                    <form-item label="固定电话" prop="TelPhone">

                        <i-input v-model="formValidate.TelPhone" style="width:300px"></i-input>

                    </form-item>

                    <form-item label="联系地址" prop="Address">

                        <i-input v-model="formValidate.Address" style="width:300px"></i-input>

                    </form-item>

 

                    <form-item>

                        <i-button type="primary" v-on:click="handleSubmit('formValidate')">

                            <span v-html="myWord.submit"></span>   

                        </i-button>  

                        <i-button type="ghost" v-on:click="handleReset('formValidate')" style="margin-left: 8px">

                            <span v-html="myWord.cancel"></span> 

                        </i-button>

                    </form-item>

                </i-form>

 

            </Card>

 

            <Modal v-model="modal1" title="修改密码" v-on:on-ok="okClick('formPassword')" v-on:on-cancel="cancelClick('formPassword')">

                <i-form ref="formPassword" :model="formPassword" :rules="ruleformPassword" :label-width="100">

 

                    <form-item label="原密码" prop="OldPassword">

                        <i-input v-model="formPassword.OldPassword" style="width:200px"></i-input>

                    </form-item>

                    <form-item label="新密码" prop="Password">

                        <i-input v-model="formPassword.Password" style="width:200px"></i-input>

                    </form-item>

                    <form-item label="确认新密码" prop="Password2">

                        <i-input v-model="formPassword.Password2" style="width:200px"></i-input>

                    </form-item>

 

                </i-form>

           

            </Modal>

        </div>

</div>

 

    <script type="text/javascript">

 

 

        var vmUserInfo = new Vue({

            el: '#personalCenterDiv',

            data : {

                

                    modal1: false,

                   // modal2: false,

                    formValidate: {

                        UserName: '',

                        RealName: '',

                        Company: '',

                        BirthDate: '',

                        Phone: '',

                        TelPhone: '',

                        Address: '',

                        TypeID: ''

 

                    },

                    myWord:{

                        personInfo: '个人信息',

                        changePassword: '修改密码',

                        submit: '提交',

                        cancel: '取消'

                        

                         

                    },

                    formPassword: {

                        OldPassword: '',

                        Password: '',

                        Password2: ''

                    },

      

                    ruleValidate: {

                        UserName: [

                             { required: true, message: '用户名不能为空！', trigger: 'blur' }

                        ],

                        RealName: [

                             { required: true, message: '真实姓名不能为空！', trigger: 'blur' }

                        ],

                        Company: [

                             { required: true, message: '工作单位不能为空！', trigger: 'blur' }

                        ],

                        BirthDate: [

                             { required: true, type: 'date', message: '出生日期不能为空！', trigger: 'change' }

                        ],

                        Phone: [

                             { required: true, message: '手机号不能为空！', trigger: 'blur' }

                        ],

                        TelPhone: [

                             { required: true, message: '固定电话不能为空！', trigger: 'blur' }

                        ],

                        Address: [

                             { required: true, message: '联系地址不能为空！', trigger: 'blur' }

                        ]

 

                    },

                    ruleformPassword: {

                        OldPassword: [

                             { required: true, message: '原密码不能为空！', trigger: 'blur' }

                        ],

                        Password: [

                             { required: true, message: '新密码不能为空！', trigger: 'blur' }

                        ],

                        Password2: [

                             { required: true, message: '确认密码不能为空！', trigger: 'blur' }

                        ]

                    }

                 

            },

            created: function () {

 

            },

            methods: {

                handleSubmit:function(name) {

                    var that = this;

                    

                    this.$refs[name].validate(function(valid) {

                        //console.dir(valid);

                        //非空校验通过

                        if (valid) {

                            var getData = {

 

                                UserName: that.formValidate.UserName,

                                RealName: that.formValidate.RealName,

                                Company: that.formValidate.Company,

                                BirthDate: that.formValidate.BirthDate,

                                Phone: that.formValidate.Phone,

                                TelPhone: that.formValidate.TelPhone,

                                Address: that.formValidate.Address

 

                            }

                            //console.dir(getData);

                            that.$http.post('@Url.Action("SetLoginUserInfo", "Account")', getData).then(function (result) {

 

                                if (result.data.success) {

 

                                    that.instance("success", "提交成功！");

                                }

                                else {

                                    that.instance("error", "提交失败！");

 

                                }

 

                            }, function (response) {

 

 

                            });

 

 

                        } else {

                            that.instance("warning", "不能存在空值！")

 

 

                        }

                    })

                },

 

                handleReset: function(name) {

 

                    this.$refs[name].resetFields();

                    window.location = '/Ecology';

                },

                okClick: function(name) {

                    var that = this;

                    //非空校验

                    this.$refs[name].validate(function (valid) {

                        // console.dir(valid);

                        if (valid) {

                            var getData = {

                                UserName: that.formValidate.UserName,

                                OldPassword: that.formPassword.OldPassword,

                                Password: that.formPassword.Password,

                                Password2: that.formPassword.Password2

 

                            }

                            // console.dir(getData);

                            that.$http.post('@Url.Action("SetUserPassword", "Account")', getData).then(function (result) {

                             //   console.dir(result.data.msg);

                                if (result.data.success) {

                                    that.instance("success", result.data.msg);

                                    ;

                                }

                                else {

                                  //  console.log("error:SetUserPassword");

                                    that.instance("error", result.data.msg);

 

                                }

 

                            }, function (response) {

 

 

                            });

 

 

                        } else {

 

                            that.instance("warning", "三者都不能为空！");

 

                        }

 

 

                    });

 

                    //vmUserInfo.formPassword.OldPassword = '';

                    //vmUserInfo.formPassword.Password = '';

                    //vmUserInfo.formPassword.Password2 = '';

                    //删除密码信息

                    this.$refs[name].resetFields();

 

                },

                cancelClick: function (name) {

                    this.$refs[name].resetFields();

                },

                instance: function (type, message) {

 

                    const title = '提示信息:';

                    const content = '<p>' + message + '</p>';

                    switch (type) {

                        case 'info':

                            this.$Modal.info({

                                title: title,

                                content: content

                            });

                            break;

                        case 'success':

                            this.$Modal.success({

                                title: title,

                                content: content

                            });

                            break;

                        case 'warning':

                            this.$Modal.warning({

                                title: title,

                                content: content

                            });

                            break;

                        case 'error':

                            this.$Modal.error({

                                title: title,

                                content: content

                            });

                            break;

                    }

                }

            },

            mounted: function () {

                var that = this;

 

 

                that.$http.post('@Url.Action("GetLoginUserInfo", "Account")', {}).then(function (result) {

                    //  console.dir(result);

                    if (result.data.success == true) {

                        if (result.data.rows != undefined && result.data.rows != null) {

 

                            if (result.data.rows.TypeID != null) {

                                if (result.data.rows.TypeID == 1) {

                                    vmUserInfo.formValidate.TypeID = "普通用户";

                                } else if (result.data.rows.TypeID == 2) {

                                    vmUserInfo.formValidate.TypeID = "管理员";

                                }

                            }

                            vmUserInfo.formValidate.UserName = result.data.rows.UserName;

                            vmUserInfo.formValidate.RealName = result.data.rows.RealName;

                            vmUserInfo.formValidate.Company = result.data.rows.Company;

                            vmUserInfo.formValidate.BirthDate = result.data.rows.BirthDate;

                            vmUserInfo.formValidate.Phone = result.data.rows.Phone;

                            vmUserInfo.formValidate.TelPhone = result.data.rows.TelPhone;

                            vmUserInfo.formValidate.Address = result.data.rows.Address;

                        }

 

 

                    } else {

                      //  console.log("error:GetLoginUserInfo");

 

                    }

 

                }, function (response) {

 

 

                });

            }

 

        });

 

 

 

 

 

    </script>