Vue为什么控件有值，但是却改动不了？

Vue为什么一些控件有值，但是却改动不了？（使用$set）

最近工作项目中，遇到一个问题，特此来记录一下。

上图是从服务端返回的数据。这里的akyh…属性，是我直接push进去的。
但是我在界面上再想进行更改，却发现更不动，再加上还有一些表单的验证，这就导致：

靠！我input框里面有值，居然还给我报错？？？

后来发现了一些不同,我们来看下面这张图片：

通过比较第一张图片和第三章图片，我发现第三张图片多了get和set方法。

原因

由于受JavaScript的限制，vue.js不能监听对象属性的添加和删除，因为在vue组件初始化的过程中，会调用getter和setter方法，所以该属性必须是存在在data中，视图层才会响应该数据的变化

解决办法
1.使用this.$set(obj, key, value)/vue.set(obj, key, value)

2.通过Object.assign(target, sources)方法

参考：https://blog.csdn.net/hhkongbai/article/details/101022019

本文地址：https://blog.csdn.net/weixin_41898003/article/details/111143993