Vue为什么控件有值,但是却改动不了?

2022-07-26,,

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

《Vue为什么控件有值,但是却改动不了?.doc》

下载本文的Word格式文档,以方便收藏与打印。