vue修改数据的时候,表单值回显不正确问题及解决

目录修改数据的时候，表单值回显不正确vue简单实现数据回显1、回显输入框html2、data定义的数据3、计算属性判断按钮状态4、对*数据做处理修改数据的时候，表单值回显不正确如果在修改数据的时候，...

目录

修改数据的时候，表单值回显不正确

如果在修改数据的时候，发现表单的值回显不正确，每次修改，都是第一次修改的值，这个可能是你的代码有问题。

如果出现上面的问题，请检查

(1) prop的数据是否绑定正确

<el-col :span="24">
 <el-form-item label="图标" prop="icon">
  <e-icon-picker v-model="stform.icon" />
 </el-form-item>
</el-col>

(2android) 实在不行 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()
  },
 }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。