vue修改數(shù)據(jù)的時候,表單值回顯不正確問題及解決

更新時間：2022年11月23日 14:30:54 作者：MarkCoder

這篇文章主要介紹了vue修改數(shù)據(jù)的時候，表單值回顯不正確的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

修改數(shù)據(jù)的時候，表單值回顯不正確

如果在修改數(shù)據(jù)的時候，發(fā)現(xiàn)表單的值回顯不正確，每次修改，都是第一次修改的值，這個可能是你的代碼有問題。

如果出現(xiàn)上面的問題，請檢查

(1) prop的數(shù)據(jù)是否綁定正確

<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簡單實現(xiàn)數(shù)據(jù)回顯

簡單記錄自己寫的數(shù)據(jù)回顯，比較復(fù)雜如果有更好的方法請指正

寫了兩個輸入框，用焦點修改狀態(tài)通過值來判斷可否點擊

1、回顯輸入框html

? ? ? ?<van-form @submit="onSubmit">
? ? ? ? //這塊是判斷是否顯示 哪一個輸入框
? ? ? ? ?<template v-if="isInput">
? ? ? ? ? <van-field v-model="repeatauthInfo.repeatbankNo"
? ? ? ? ? ? ? ? ? ? ?label="本人實名銀行卡"
? ? ? ? ? ? ? ? ? ? ?name="本人實名銀行卡2"
? ? ? ? ? ? ? ? ? ? ?maxlength="25"
? ? ? ? ? ? ? ? ? ? ?:formatter="formatter"http://效驗規(guī)則
? ? ? ? ? ? ? ? ? ? ?:disabled='hasDisabled'
? ? ? ? ? ? ? ? ? ? ?label-class="authTitle"
? ? ? ? ? ? ? ? ? ? ?placeholder="請?zhí)顚戙y行卡號"
? ? ? ? ? ? ? ? ? ? ?@input="repeatInputbankNo"
? ? ? ? ? ? ? ? ? ? ?@blur="blurBankNo"http://失去焦點事件?
? ? ? ? ? ? ? ? ? ? ?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="請?zhí)顚戙y行卡號"
? ? ? ? ? ? ? ? ? ? ?@input="InputbankNo"
? ? ? ? ? ? ? ? ? ? ?@focus="focusBankNo"http://獲取焦點事件
? ? ? ? ? ? ? ? ? ? ?input-align="right" />
? ? ? ? </template>
? ? ? ? <van-button :class="isSumit?'saveTrue':'saveFalse'"
? ? ? ? ? ? ? ? ? ? round
? ? ? ? ? ? ? ? ? ? block
? ? ? ? ? ? ? ? ? ? native-type="submit">下一步，添加收款信息</van-button>
? ? ? </van-form>

2、data 定義的數(shù)據(jù)

data() {
? ? return {
? ? ? authInfo: {
? ? ? ? bankNo: '', //銀行卡
? ? ? },
? ? ? repeatauthInfo: {
? ? ? ? repeatbankNo: '', //修改銀行卡信息
? ? ? },
? ? ? isInput: false,
? ? ? hasDisabled: false, //通過狀態(tài)判斷輸入框是否可用
? },

3、計算屬性判斷按鈕狀態(tài)

? ?computed: {
? ? ? //計算屬性判斷是否校驗通過，按鈕狀態(tài)
? ? ? isSumit() {
? ? ? ? if (
? ? ? ? ? this.authInfo.name &&
? ? ? ? ? this.authInfo.cardNo.length >= 15 &&
? ? ? ? ? this.authInfo.bankNo.length >= 10 &&
? ? ? ? ? this.authInfo.bankName &&
? ? ? ? ? this.authInfo.bankCity
? ? ? ? ) {
? ? ? ? ? if (this.isInput) {//如果修改輸入內(nèi)容 輸入位數(shù)須超過10位才可通過校驗
? ? ? ? ? ? if (this.repeatauthInfo.repeatbankNo.length >= 10) {
? ? ? ? ? ? ? return true
? ? ? ? ? ? } else {
? ? ? ? ? ? ? return false
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? ? return true
? ? ? ? } else {
? ? ? ? ? return false
? ? ? ? }
? ? ? },
? ? },

4、對*數(shù)據(jù)做處理

因為如果authInfo.bankNo 值存在的話是做了加密處理顯示的帶*號，但是用戶輸入的話是不允許有星號的，后臺對有*號的是不校驗的

? methods: {//如果存在數(shù)據(jù)后臺返回的數(shù)據(jù)是帶*號加密的
? ? ? //*號處理
? ? ? 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() {//銀行卡焦點事件點擊時修改狀態(tài)
? ? ? ? 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: '請勾選協(xié)議',
? ? ? ? ? })
? ? ? ? } 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()
? ? },
? }

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: