vue修改数据的时候,表单值回显不正确问题及解决
作者:MarkCoder
这篇文章主要介绍了vue修改数据的时候,表单值回显不正确的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
修改数据的时候,表单值回显不正确
如果在修改数据的时候,发现表单的值回显不正确,每次修改,都是第一次修改的值,这个可能是你的代码有问题。
如果出现上面的问题,请检查
(1) prop的数据是否绑定正确
<el-col :span="24"> <el-form-item label="图标" prop="icon"> <e-icon-picker v-model="stform.icon" /> </el-form-item> </el-col>
(2) 实在不行 forceUpdate一次
this.$forceUpdate();
vue简单实现数据回显
简单记录自己写的数据回显,比较复杂如果有更好的方法请指正
写了两个输入框,用焦点修改状态通过值来判断可否点击
1、回显输入框html
<van-form @submit="onSubmit"> //这块是判断是否显示 哪一个输入框 <template v-if="isInput"> <van-field v-model="repeatauthInfo.repeatbankNo" label="本人实名银行卡" name="本人实名银行卡2" maxlength="25" :formatter="formatter"//效验规则 :disabled='hasDisabled' label-class="authTitle" placeholder="请填写银行卡号" @input="repeatInputbankNo" @blur="blurBankNo"//失去焦点事件 input-align="right" /> </template> <template v-else> <van-field v-model="authInfo.bankNo " label="本人实名银行卡" name="本人实名银行卡" maxlength="25" :formatter="formatter" :disabled='hasDisabled' label-class="authTitle" placeholder="请填写银行卡号" @input="InputbankNo" @focus="focusBankNo"//获取焦点事件 input-align="right" /> </template> <van-button :class="isSumit?'saveTrue':'saveFalse'" round block native-type="submit">下一步,添加收款信息</van-button> </van-form>
2、data 定义的数据
data() { return { authInfo: { bankNo: '', //银行卡 }, repeatauthInfo: { repeatbankNo: '', //修改银行卡信息 }, isInput: false, hasDisabled: false, //通过状态判断输入框是否可用 },
3、计算属性判断按钮状态
computed: { //计算属性判断是否校验通过,按钮状态 isSumit() { if ( this.authInfo.name && this.authInfo.cardNo.length >= 15 && this.authInfo.bankNo.length >= 10 && this.authInfo.bankName && this.authInfo.bankCity ) { if (this.isInput) {//如果修改输入内容 输入位数须超过10位才可通过校验 if (this.repeatauthInfo.repeatbankNo.length >= 10) { return true } else { return false } } return true } else { return false } }, },
4、对*数据做处理
因为如果authInfo.bankNo 值存在的话 是做了加密处理显示的带*号 ,但是用户输入的话是不允许有星号的,后台对有*号的是不校验的
methods: {//如果存在数据后台返回的数据是带*号加密的 //*号处理 isStr(value) { let str = value let reg = new RegExp('[*]') if (reg.test(value)) { str = value.replace(/\*/g, '') } return str }, //input 事件不允许用户输入*号 InputcardNo(value) {//银行卡 this.authInfo.cardNo = this.isStr(value) }, repeatInputbankNo(value) {//修改银行卡 this.repeatauthInfo.repeatbankNo = this.isStr(value) }, //回显处理 focusBankNo() {//银行卡焦点事件点击时修改状态 if (this.authInfo.bankNo.indexOf('*') != -1) { this.isInput = true // this.repeatauthInfo.repeatbankNo == '' } else { this.isInput = false } }, blurBankNo() {//失去焦点 存在值的话显示修改输入框否则显示原来输入框 if (this.repeatauthInfo.repeatbankNo) { this.isInput = true } else { this.isInput = false } }, //输入框去空格 formatter(value) { return value.trim() }, //获取实名信息 getaccountInfo() { accountInfo().then((res) => { // console.log(res) this.authInfo = res.data }) }, //提交信息 onSubmit(values) setTimeout(() => { this.checkBlure(values) }, 500) }, checkBlure(values) { const that = this if (!that.isSumit) { return } else if (!that.agreementFlag) { that.$message({ type: 'error', message: '请勾选协议', }) } else { //需要携带卡号bankNo let { bankNo } =this.authInfo let { repeatbankNo} = this.repeatauthInfo let params = { bankNo: repeatbankNo ? repeatbankNo : bankNo, } saveBank(params).then((res) => { // console.log(res) if (res.code == 200) { that.$router.push({ path: '/settleAddAccount', query: { from: 'authentication' }, }) //身份证二要素校验失败 } else if ( res.code == 11020 || res.code == 11005 || res.code == 11019 || res.code == 11021 || res.code == 14002 ) { that.showFailed = true that.showFailText = res.message //提示弹框 } }) } }, }, created() { this.getaccountInfo() }, }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。