iview Refresh lags behind HTML issues

First, the problem description

Each time you refresh the page, the content below will flash through.

To return to normal after a flash:

Second, the settlement

Problem code:

@*<span> Change Password </span>*@
@*<span>{{myword.personinfo}} </span>*@
Change to v-html and assign a value after the method executes in Iveiw.
<span v-html= "Myword.personinfo" ></span>

Data: {

myword:{
PersonInfo: ' Personal information ',
ChangePassword: ' Change Password ',
Submit: ' Submission ',
Cancel: ' Cancel '
},

The same problem still occurs in many places.

Three, the complete code:

@{viewbag.title = "Personal Center"; Layout = "~/views/shared/_layoutnotfooter.cshtml";}        <style>. Main-container {overflow-y: hidden; }</style><div id= "Personalcenterdiv" > <div style= "background: #eee;p adding:20px" > < Card style= "width:100%;" > <p slot= "title" > <icon type= "person" ></Icon> @                    *<span> Change Password </span>*@ @*<span>{{myword.personinfo}} </span>*@                <span v-html= "Myword.personinfo" ></span> </p>                    <i-form ref= "formvalidate": Model= "formvalidate": rules= "rulevalidate": label-width= ">" <form-item label= "User name" prop= "UserName" > <span v-html= "Formvalidate.username" ;</span> </form-item> <form-Item label= "User Type" > <span v-html= "Formvalidate.typeid" ></span>                                             </form-item> <form-item label= "Password" > <i-button type= "Ghost" v-on:click= "Modal1=true" > <span v-html= "Mywo                                        Rd.changepassword "></span> </i-button> </form-item> <form-item label= "real name" prop= "Realname" > <i-input v-m                    Odel= "Formvalidate.realname" style= "width:300px" ></i-input> </form-item> <form-item label= "work unit" prop= "Company" > <i-input v-model= "Formvalidate.company" style= "width:300px" ></i-input> </form-item> <form-item label= "date of birth" prop        = "BirthDate" >                    <date-picker type= "Date" v-model= "Formvalidate.birthdate" ></date-picker> </form-item> <form-item label= "mobile" prop= "Phone" > <i-input v-mo                    Del= "Formvalidate.phone" style= "width:300px" ></i-input> </form-item> <form-item label= "fixed phone" prop= "Telphone" > <i-input v-model= "Formvalidate.telphone" style= "W idth:300px "></i-input> </form-item> <form-item label=" Contact address "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= "Change Password" v-on:on-ok= "Okclick (' Formpassword ')" v-on:on-cancel= "Cancelclick (' Formpassword ') "> <i-form ref=" formpassword ": Model=" Formpassword ": rules=" Ruleformpassword ": Label-wi Dth= "> <form-item label=" original password "prop=" OldPassword "> <i-input v-mod                    El= "Formpassword.oldpassword" style= "width:200px" ></i-input> </form-item> <form-item label= "New password" prop= "Password" > <i-input v-model= "Formpassword.password" Styl   E= "width:200px" ></i-input>                 </form-item> <form-item label= "Confirm New password" prop= "Password2" > <i-input v-model= "Formpassword.password2" style= "width:200px" ></i-input> </form-ite m> </i-form> </Modal> </div></div> <script Typ                                   E= "Text/javascript" > var vmuserinfo = new Vue ({el: ' #personalCenterDiv ', data: {                        Modal1:false,//Modal2:false, Formvalidate: {                        UserName: ', Realname: ', Company: ', BirthDate: ', Phone: ', Telphone: ', Address: ' , TypeID: '}, myword:{personInfo: '                  Personal Information ',      ChangePassword: ' Change Password ', submit: ' Submit ', Cancel: ' Cancel ' }, Formpassword: {oldpassword: '                         ', Password: ', Password2: '}, Rulevalidate: {UserName: [{required:true, message: ' username cannot be empty! ', Trigger: ' Blur '}], realname: [{required: True, message: ' Real name cannot be empty! ', Trigger: ' Blur '}], company: [{required:t Rue, message: ' The work unit cannot be empty!  ', Trigger: ' Blur '}], BirthDate: [{required: True, type: ' Date ', message: ' Date of birth cannot be empty!               ', Trigger: ' Change '}],         Phone: [{required:true, message: ' The phone number cannot be empty! ', Trigger: ' Blur '}], Telphone: [{required: True, message: ' Fixed phone cannot be empty! ', Trigger: ' Blur '}], Address: [{required:t Rue, message: ' The contact address cannot be empty!                        ', Trigger: ' Blur '}]}, Ruleformpassword: { OldPassword: [{required:true, message: ' The original password cannot be empty! ', Trigger: ' Blur '}], Password: [{required: True, message: ' The new password cannot be empty!  ', Trigger: ' Blur '}], Password2: [{required: True, message: ' Confirm password cannot be empty! ', Trigger: ' Blur '}]}, created:functIon () {}, methods: {handlesubmit:function (name) {var that = th                                       is;                        this. $refs [Name].validate (function (valid) {//console.dir (valid); Non-null check via if (valid) {var getData = {Use                                RName:that.formValidate.UserName, RealName:that.formValidate.RealName,                                Company:that.formValidate.Company, BirthDate:that.formValidate.BirthDate, Phone:that.formValidate.Phone, TelPhone:that.formValidate.Te                            Lphone, 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", "Submit success!")                                "); } else {that.instance ("error", "Commit failed!")                                ");                        }}, function (response) {}); } else {that.instance ("warning", "Cannot exist null value!")                    ")}})}, Handlereset:function (name) {                    this. $refs [Name].resetfields ();                window.location = '/ecology ';                    }, Okclick:function (name) {var = this;                        Non-null check this. $refs [Name].validate (function (valid) {//Console.dir (valid);     if (valid) {                       var getData = {UserName:that.formValidate.UserName, OldPassword:that.formPassword.OldPassword, Password:that.formPassword.Pa                            ssWOrd, 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", "all three cannot be empty!")                        ");                    }                    });                    VmUserInfo.formPassword.OldPassword = ";                    VmUserInfo.formPassword.Password = ";                    VmUserInfo.formPassword.Password2 = ";                Delete password information this. $refs [Name].resetfields ();                }, Cancelclick:function (name) {this. $refs [Name].resetfields ();                    }, Instance:function (type, message) {CONST TITLE = ' Hint message: ';                    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 = 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 = "normal user";                                } else if (Result.data.rows.TypeID = = 2) {VmUserInfo.formValidate.TypeID = "Administrator"; }} 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>

　　

iview Refresh lags behind HTML issues