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