vue中接收到后台数据再回显到输入框时无法修改

最新推荐文章于 2022-12-04 15:56:54 发布

May_Xu_

最新推荐文章于 2022-12-04 15:56:54 发布

阅读量1.8k

点赞数 2

文章标签： javascript json vue.js

本文链接：https://blog.csdn.net/May_Xu_/article/details/118967986

版权

本文介绍了如何在Vue应用中，当v-model绑定的数据来自后台并需手动添加自定义字段时，如何使用this.$set方法解决回显及编辑问题。通过实例展示了如何将数据库返回的固定字段与动态匹配值数组结合，并确保数据双向绑定的正确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我是因为v-model绑定的不是后台返回的字段里面的任意一个，是自己拿到数据时手动添加的一个字段（循环遍历添加一个字段如：item.xxx = aaa）因此绑定xxx回显时无法编辑更改，需要用到this.$set() 来替代遍历的 item.xxx = aaa ，格式：

//数据库返回的字段：
/*这里只做演示

data = {
    fieldCode:"name",
    fieldName:"患者姓名",
    matchingType:"String",
    num:2
}

/*

//实际需要的字段
/*

{
    fieldCode:"name",
    fieldName:"患者姓名",
    matchingType:"String",
    matchingValueArray:[{
        value:'123',//这是循环绑定值
    },{
        value:'test'
    }]
}

*/
const matchingValueArray = []
for(let i = 0;i < num; i++){
    matchingValueArray.push({ value: valueSplit[i] })
}
// this.$set(obj,key,value)，key记得加引号，是字符串
this.$set(data, 'matchingValueArray', matchingValueArray)

搞定！