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

 更新时间:2022年11月23日 14:30:54   作者: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()
    },
  }

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue3+vite+ts 通过svg-sprite-loader 插件使用自定义图标的详细步骤

    vue3+vite+ts 通过svg-sprite-loader 插件使用自定义图标的详细步骤

    这篇文章主要介绍了vue3+vite+ts通过svg-sprite-loader插件使用自定义图标,本文分步骤给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • Vuex入门学习之Getter详解

    Vuex入门学习之Getter详解

    这篇文章主要介绍了Vuex入门学习之Getter详解,Vuex 允许我们在 store 中定义 getter(可以认为是 store 的计算属性),就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算,需要的朋友可以参考下
    2023-11-11
  • Vue 关闭当前页、关闭当前标签tagsView的实现方法

    Vue 关闭当前页、关闭当前标签tagsView的实现方法

    这篇文章主要介绍了Vue 关闭当前页、关闭当前标签tagsView,主要有两种方式,一种是在vue页面直接实现,另一种在js文件中写自定义函数,在vue页面中调用,本文通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • vue-swiper的使用教程

    vue-swiper的使用教程

    swiper是我之前做前端页面会用到的一个插件,我自己认为是非常好用的。这篇文章给大家介绍vue-swiper的使用教程,感兴趣的朋友一起看看吧
    2018-08-08
  • v-html渲染组件问题

    v-html渲染组件问题

    最近在学习vue,今天正好发现个问题,本文介绍了v-html渲染组件问题,整理了问题的解决方法,有需要的小伙伴可以参考下
    2021-05-05
  • Vue使用pages构建多页应用的实现步骤

    Vue使用pages构建多页应用的实现步骤

    在大部分实际场景中,我们都可以构建单页应用来进行项目的开发和迭代,然而对于项目复杂度过高或者页面模块之间差异化较大的项目,我们可以选择构建多页应用来实现,那么什么是多页应用,本文就给大家介绍了Vue使用pages构建多页应用的实现步骤
    2024-12-12
  • Vue3+Vite+ElementPlus构建学习笔记

    Vue3+Vite+ElementPlus构建学习笔记

    这篇文章主要介绍了Vue3+Vite+ElementPlus构建的相关资料,文中还介绍如何在Vue3项目中加入ElementPlus库,并提供了完整引入的示例,需要的朋友可以参考下
    2024-12-12
  • Vue实现省市区级联下拉选择框

    Vue实现省市区级联下拉选择框

    这篇文章主要为大家详细介绍了Vue实现省市区级联下拉选择框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 在vue中对数组值变化的监听与重新响应渲染操作

    在vue中对数组值变化的监听与重新响应渲染操作

    这篇文章主要介绍了在vue中对数组值变化的监听与重新响应渲染操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 关于vue中计算属性computed的详细讲解

    关于vue中计算属性computed的详细讲解

    computed是vue的配置选项,它的值是一个对象,其中可定义多个计算属性,每个计算属性就是一个函数,下面这篇文章主要给大家介绍了关于vue中计算属性computed的详细讲解,需要的朋友可以参考下
    2022-07-07

最新评论