一、问题描述
每次刷新页面，下面的内容就会一闪而过。
一闪而过后恢复正常：
二、解决
问题代码：
@*<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="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="300px"></i-input>
</form-item>
<form-item label="工作单位" prop="Company">
<i-input v-model="formValidate.Company" style="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="300px"></i-input>
</form-item>
<form-item label="固定电话" prop="TelPhone">
<i-input v-model="formValidate.TelPhone" style="300px"></i-input>
</form-item>
<form-item label="联系地址" prop="Address">
<i-input v-model="formValidate.Address" style="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="200px"></i-input>
</form-item>
<form-item label="新密码" prop="Password">
<i-input v-model="formPassword.Password" style="200px"></i-input>
</form-item>
<form-item label="确认新密码" prop="Password2">
<i-input v-model="formPassword.Password2" style="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>