vue页面回显数据_解决vue表单回显数据无法修改的问题

前言：今天在做修改操作的时候遇到了一个问题，数据回显到修改表单之后，发现无法输入，也不能实现修改

项目环境：springboot+vue前后端分离

问题：修改操作数据回显无法输入值

一、问题截图

二、代码展示

编辑按钮

@click="updateWindow = true,editCustomer(scope.$index,scope.row,tableData)">编辑

点击编辑按钮后，实现数据回显方法

这里是解决问题的关键！！！

处理方法：将表单中的值先转化为字符串，然后转化为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