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

目录

• 修改数据的时候，表单值回显不正确
• vue简单实现数据回显
• 1、回显输入框html
• 2、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>

(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()
    },
  }

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