vue2 更改data里的变量不生效时，深层更改data里的变量

已于 2023-08-09 09:27:46 修改
阅读量4.1k 收藏
点赞数
分类专栏： 前端JS框架：vue2 文章标签： 前端 vue.js javascript
于 2020-01-08 17:38:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42618566/article/details/103895363
版权
当Vue2应用中遇到多层嵌套数据更新时，使用`this.$set`方法可以确保数据变化被Vue监听并生效。例如，可以这样更新第一个schoolBag数组中第三个bagData的value为666。
摘要由CSDN通过智能技术生成

如下图，当data里的数据多层嵌套
vue 更改data里的变量不生效时，深层更改data里的变量
语法：

this.$set(位置,‘属性’,‘值’);

示例：

this.$set(this.schoolBag[0].bagData[2
了解本专栏 订阅专栏 解锁全文 超级会员免费看
美酒没故事°
关注
专栏目录
订阅专栏
Vue - 修改 data 数据不变 / 视图也不变（监测不到 data 数据变化 / 双向绑定失效）
王佳斌
06-30 2745
地址没有改变，vue就监测不到数据变化。这个时候，双向绑定就失效了。只要值的地址没有改变，vue是检测不到数据变化出现这种问题后， 响应式数据根本无法修改更新与变更，数据动不了非常头疼，最重要的是，基本上无从下手。本文所提供 2 个解决方案，请您 依次 进行尝试，如 “使用正确” 99% 会生效。以下是个示例，请参考并完成核心代码抽取。 如果是数组的话，用法如下： 二、解决方案 上面的方法几乎可以大部分了，如果还是不行请尝试如下方案。 通过 $set 进行更新，通过 $forceUpdate() 进行更新
vue中无法修改data中数据
Flying_6的博客
03-10 4920
问题描述： 现在我打算修改config1中的data属性值， 我们直接使用如下方式，则可能会不成功 axios.get('/getAreaInfo/sc').then(resp => { this.config1.data = resp.data; }); 其原因可以参考以下博主： Vue进阶（九十七）：对象动态添加属性和值_IT全栈 华强工作室-CSDN博客_vue给对象添加属性和值 概括原因就是：Vue规定不允许直接修改props或者data属性，必须使用Vue.set方
vue data对象重新赋值无效(未更改)的解决方式
10-15
主要介绍了vue data对象重新赋值无效(未更改)的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 异步修改data中的值不生效
weixin_52767262的博客
04-05 1806
【代码】vue 异步修改data中的值不生效
Vue2中关于无法修改数组里对象的值
css_javascrpit的博客
02-17 591
Vue2中关于无法修改数组里对象的值
vue数据修改失效
不积跬步，无以至千里
08-18 454
vue2中如果修改深层的数据的值时，页面不显示最新数据。
如何对Vue的data中定义的对象中未定义的属性进行响应式的修改
qq_43615501的博客
09-11 2602
受JS的限制，Vue无法检测到属性的添加与删除。VUe实例会在初始化实例时，对属性执行getter/setter的转化过程，所以属性必须得是data对象上存在的，才可以让Vue转化它，这样才能让它是响应式的。 let vm = new Vue({ data:{ a:1 } }) //vm.a是响应式的 vm.b=2 //vm.b则不是响应式的了 上述的a属性时响应式的，所以当a属性发生变化时，会将变化的结果实时的渲染到页面上。而b是vm实例创建之后添加的属性，所以它不是响应式的，所以我们在修改b的值
vue 解决computed修改data数据的问题
12-13
报错的大概意思是，不可以修改data数据的属性值。查了一些答案，最终解决办法是需要用到set和get。看代码： data () { return { fold: false } } 我想修改fold的值，如果不用get和set就会报错！！！ computed:{...
vue里的data要用return返回的原因浅析
10-16
不使用`return`包裹的`data`会导致变量在全局范围内可见，这不仅可能导致数据冲突，还会影响组件的封装性和可维护性。而使用`return`包裹的`data`仅在当前组件内部生效，与其他组件隔离开来，遵循了组件化的原则。 ...
Vue多层数据结构响应式失效，视图更新失败
qq_41444226的博客
03-16 1349
在表单设计和流程设计时，碰到多层数据响应式失效问题，当时也是一脸懵，找不到错在哪里，运行代码不报错，就是不能响应式更新视图了。特此记录一下填坑过程。
vue 改变组件data_vue-resource得到数据后，如何修改组件中data的值？
Aysen的博客
01-17 680
<div id="app"><div id="content"><my-nav></my-nav></div></div>//jsvar myNav = Vue.extend({template: '<div>{{msg}}</div>',data: function () {return {msg:'...
Vue 2组件中定义变量
最新发布
lixinhui2323的博客
03-28 537
在Vue 2组件中定义变量的方式主要取决于这些变量的用途和作用域。
关于使用vue时在data定义的变量undefined问题
PleaseBeStrong的博客
07-07 1067
明明在data中定义了数据，但是页面却不显示（连静态内容都没有加载出来）.经过排查发现，data中有一项新加入的变量没有赋初始值，导致一系列报错的产生
在vue中axios的post请求返回的数据赋值给data()中的变量出现未定义的问题
热门推荐
qq_27632921的博客
09-11 1万+
首先我们看data()定义的变量 然后我们在axios请求的then中取值 这时候就会出现downdata未定义的错误，这是因为在then中this就是指向当前的对象，而无法引用data()中的变量，因此使用箭头函数就可以解决 ...
Vue2.0教程 （二）开发环境生产环境变量配置
燃燃的大尾巴
07-25 1565
vue脚手架
vue 请求嵌套_vue2.0 初始化请求的JSON多层嵌套问题
weixin_39662955的博客
12-20 933
接受的数据可以多层嵌套，但是当你调用的时候可能会出现问题，这不是因为数据本身的问题，是你调用的时机的问题。data () {return {data: '' // 你在data中定义了data}}created () {var self = thisgetJSON(){.....self.data = Data // Data是接受的json数据}}当你的页面中的v-for渲染的时候，c...
解决vue中v-if绑定data里的数据提示未定义的问题（网上找了好几种方法都不符合，后来自己研究出来的）
qq_39153893的博客
04-15 3538
情况1：网上有些人是data（）里面没定义变量aa 情况2:(但是我的不一样)，<button v-if="aa",这个aa能读取到。 但是<a v-if="aa" ,但是这个aa说没定义。对比发现，应该是a标签加载比data ()加载顺序早，所以改成 <span v-if="aa" ><a> </span>,用span（或者用其他也行，如div等...
vue data数据修改_vue中的数据属性和方法
weixin_39794347的博客
11-20 6201
点击上方“道源趣谈”，“设为星标”加“星标★”，每天早晨08：35，好文必达1.vue中的数据属性vue采用的是响应式的方式，将数据与试图绑定，当数据变更时，视图会跟着作出响应，重新渲染视图，在vue中所有的数据都是放到data这个属性中，所以data中的属性也被称为vue的数据属性1.1定义外部变量,赋值给Vue中data ...
vue data赋值不生效
09-01
Vue的data属性是用来存储组件中的数据的，但有时候我们可能会遇到data赋值不生效的情况。造成这种情况的原因可能有以下几种： 1. 对象引用问题：Vue会对data属性进行响应式处理，当我们对data中的某个属性进行赋值时，Vue会自动检测到数据的变化并更新DOM。但如果我们将data中的某个属性直接赋值为一个新的对象时，Vue就无法检测到数据的变化。解决这个问题的方法是使用Vue提供的方法（例如Vue.set或this.$set）来对对象属性进行赋值。 2. 异步问题：有时候我们可能会在created或mounted钩子函数中进行数据赋值，但由于JavaScript是单线程的，当我们在这些钩子函数中进行异步操作（例如发起网络请求）时，数据可能还没有赋值成功就被渲染到了DOM上。解决这个问题的方法是使用适当的生命周期钩子函数或异步操作的回调函数来确保数据赋值成功后再进行渲染。 3. 变量命名问题：有时候我们可能会在组件中定义一个与data属性同名的变量，这样就会导致数据赋值不生效。这是因为Vue会优先使用组件中的局部变量而不是data属性。解决这个问题的方法是使用this关键字来访问data属性，例如this.$data.property。 总之，对于Vue data赋值不生效的问题，我们需要仔细检查对象引用、异步操作和变量命名等方面的问题，以确保数据能够正确地进行赋值和更新。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

美酒没故事°

谢谢看官

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值