解決vue表單回顯數據無法修改的問題

前言：今天在做修改操作的時候遇到了一個問題，數據回顯到修改表單之后，發現無法輸入，也不能實現修改

項目環境：springboot+vue前后端分離

問題：修改操作數據回顯無法輸入值

一、問題截圖

二、代碼展示

1. 編輯按鈕

 <el-button type="text" size="small"
     @click="updateWindow = true,editCustomer(scope.$index,scope.row,tableData)">編輯

2. 點擊編輯按鈕后，實現數據回顯方法

這里是解決問題的關鍵！！！

處理方法：將表單中的值先轉化為字符串，然后轉化為json對象

JSON.stringify()：將值轉換為 JSON 字符串。

JSON.parse() ：將一個 JSON 字符串轉換為對象。

editCustomer(index, row, tableData) {
    this.ruleForm.updateData = JSON.parse(JSON.stringify(this.ruleForm));
    this.ruleForm.updateData.custId = tableData[index].custId
    this.ruleForm.updateData.custName = tableData[index].custName
    this.ruleForm.updateData.custSource = tableData[index].custSource
    this.ruleForm.updateData.custSex = tableData[index].custSex
    this.ruleForm.updateData.custTel = tableData[index].custTel
    this.ruleForm.updateData.custEmail = tableData[index].custEmail
    this.ruleForm.updateData.custAddress = tableData[index].custAddress
}

3. 修改表單

<el-dialog title="修改客戶" :visible.sync="updateWindow">
    <el-form label-width="100px" class="demo-ruleForm"
        size="mini">
        <el-form-item label="客戶ID" prop="custId">
        <el-input v-model="ruleForm.updateData.custId" readonly></el-input>
        </el-form-item>
        <el-form-item label="客戶名稱" prop="custName">
        <el-input v-model="ruleForm.updateData.custName"></el-input>
        </el-form-item>
        <el-form-item label="客戶來源" prop="custSource">
        <el-input v-model="ruleForm.updateData.custSource"></el-input>
        </el-form-item>
        <el-form-item label="性別" prop="custSex">
        <el-input v-model="ruleForm.updateData.custSex" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="電話" prop="custTel">
        <el-input v-model="ruleForm.updateData.custTel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="郵箱" prop="custEmail">
        <el-input v-model="ruleForm.updateData.custEmail" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="custAddress">
        <el-input v-model="ruleForm.updateData.custAddress"></el-input>
        </el-form-item>
        <el-form-item>
        <el-button type="primary" @click="updateForm('ruleForm')">確認修改</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
        <el-button @click="updateWindow = false">取 消</el-button>
        </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            </div>
            </el-dialog>

4. 點擊確認之后，向后端傳入數據，執行修改操作

/*修改表單*/
updateForm() {
    axios.put("http://localhost:8181/Customer/updateCustomer", {
        custId: this.ruleForm.updateData.custId,
        custName: this.ruleForm.updateData.custName,
        custSource: this.ruleForm.updateData.custSource,
        custSex: this.ruleForm.updateData.custSex,
        custTel: this.ruleForm.updateData.custTel,
        custEmail: this.ruleForm.updateData.custEmail,
        custAddress: this.ruleForm.updateData.custAddress,
    }).then(function (resp) {
        if (resp.data == 1) {
            alert("修改成功！", window.location.href = "/CustomerManager");
        } else {
            alert("修改失敗！")
        }
    })
},

總結：解決回顯數據不能修改的問題需要將表單數據轉換為json對象，不然前台修改不了值，后台接收不到值