vue中给对象新增属性，无法触发视图更新

最新推荐文章于 2022-05-18 19:55:55 发布
最新推荐文章于 2022-05-18 19:55:55 发布
阅读量820 收藏
点赞数 1
文章标签： vue中给对象新增属性 vue中修改对象属性视图无法更新
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40652539/article/details/102728881
版权

在开发时碰到一种情况：在vue的data里声明一个对象，如：dataObj: {}，然后动态给对象新增一个属性，但是视图层无法更新

解决方法：

动态给 dataObj新增属性时：
错误的方法：this.dataObj.name='haha',这样直接新增属性时不能被vue所监听;
正确的方法：this.$set(this.dataObj, 'name', 'haha'),这样就能被vue监听到，从而更新视图；

当对象中的属性已被vue所监听，则可以直接使用this.dataObj.name='hhhhhhhh'直接对属性进行修改；

~~帅~~
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue第6篇，Vue中的this.$set()使用教学，详细过程（vue项目中this.$set()的妙用）
weixin_65793170的博客
11-15 4万+
this.$delete 也是一个实例方法，用于从响应式对象中删除属性，并确保该操作也是响应式的。使用this.$delete可以解决Vue响应式系统的另一个限制，即无法检测到通过索引直接删除数组元素的变化。通过this.$delete方法，可以显式地告诉Vue，某个属性已经被删除，从而触发视图的更新。
vue 修改对象的值视图没有发生改变_Vue对象属性改变，视图却不刷新问题解决...
weixin_39935654的博客
12-22 621
问题需求如下：文件上传列表这是一个文件上传Modal，使用了antd的Upload组件，但是没有使用组件自带的文件列表，而是自定义了一个列表。想要的效果是，文件列表后面的动作根据文件上传状态改变，如还未上传时是“等待上传”，上传开始时是“上传中”，上传完成后变成“下载”。由于对Vue的学习还停留在会用的阶段，并没有太深入的研究，所以，在解决这个问题时，走了一些弯路，现将在解决问题中走的弯路也了并记...
解决Vue对象和数组双向绑定触发watcher监听的问题
weixin_44965846的博客
05-18 746
总结了一下集中方法： 对于数组： 1，splice(arr, index, value) 2，this.$set(arr, index, value)（官方） 3，es6语法：arr = [...arr, ...newArr] 对于对象： this.$set(obj, key, value) （官方），这种在修改对象已存在的某个属性时，不能触发watcher 1，es6语法：obj = {...obj, newObj} 2，obj = Object.assign({}, obj, newOb
vue this.$set 为对象新增属性，并触发视图更新
will5451的博客
06-02 893
详情:使用以下代码为data赋值，出现界面不刷新时，无法对文本框进行编辑，输入框只保留操作的最后一步 this.ruleForm.roleName = this.$store.state.roleSetting.roleinfo.roleinstancename; this.ruleForm.content=this.$store.state.roleSetting.roleinfo.roleinstacedescription; 原因：当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的
在其它js模块触发当前vue组件的watch监听方法
weixin_37744901的博客
06-04 672
this.$set(this, "requestStatus", hy.messageRequest); this指向vue组件，requestStatus是当前vue通过watch监听的对象，hy.message是其他js文件导出模块后，挂载到全局的对象。 上面代码在mounted注册后，实现的功能： hy.messageRequest对象被改变后，会触发当前vue组件的watch对requestStatus的监听方法。 也就是说，当前vue组件监听了requestStatus对象的某属性，比如： wa
vue watch深度监控一个对象下新增属性不生效问题
qq_40106513的博客
10-12 1130
先简单还原下项目中遇到的问题： adc为一个空对象，watch深度监听abc下的pageNum属性（此时还没有）。 data() { return { abc: { } } }, watch:{ 'abc': { deep:true, immediate:true, handler(newV){ this.pageNum = newV.pageNum } } }
Vue中数组/对象更新后视图不触发更新原因
weixin_49411859的博客
12-14 1587
Vue文档中对于响应式原理有提到如下注意事项: 由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。 这也就是说 问题描述： @Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sen
VUE 实现动态给对象增加属性，并触发视图更新操作示例
10-15
然而，对于已经创建的实例，直接给对象动态添加新属性并不会触发视图更新，因为Vue无法检测到这些新增的属性。为了解决这个问题，Vue提供了`Vue.set`方法来确保新添加的属性能够被正确地响应化，从而在改变属性值时...
解决vue中对象属性改变视图不更新的问题
11-27
`Vue.set`是Vue提供的一个全局API，它用于向响应式对象中添加新的属性，并确保该属性也是响应式的，同时触发视图更新。例如： ```javascript Vue.set(vm.obj, 'k1', 'v1'); ``` 在上面的例子中，`vm.obj`是响应式...
Vue.set()动态的新增与修改数据,触发视图更新的方法
01-19
用法：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。 例： data:{ namelist:[ {message:叶落森,id:1}, {message:姜艳霞,id:2}, {message:姜小帅,id:3} ] }, Vue.set(this...
Vue对象赋值视图不更新问题及解决方法
10-16
然而，在某些情况下，直接对Vue对象中的数据进行赋值可能不会触发视图的更新，导致双向绑定失效。本文将深入探讨这个问题，并提供有效的解决方案。 首先，我们要理解Vue是如何跟踪变化的。Vue使用代理（proxy）和...
Vue之Vue.set动态新增对象属性方法
11-30
当我们给一个比如props中，或者data中被观测的对象添加一个新的属性的时候，不能...以上这篇Vue之Vue.set动态新增对象属性方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
vue this.$set 给data对象新增属性，并触发视图更新
zhaoyangguang021的博客
07-11 2万+
   向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性     data () { return { user: { name: '', id: '' } } }如果我们直接给user增加属性mounte...
Vue中this.$set的用法(解决数组、对象修改后不更新问题)
热门推荐
XinKun的博客
03-01 2万+
一、this.$set实现什么功能，为什么要用它？ 当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.$set（）这个方法了，简单来说this.$set的功能就是解决这个问题的啦。官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = ‘hi’). 二、怎么用它？ 举个例子： 1.Vu
Vue中给对象添加新属性界面不刷新的问题
LittleMoon_lyy的博客
08-22 1399
Vue中给对象添加新属性界面不刷新的问题 一、直接添加属性的问题 我们从一个例子开始 定义一个p标签，通过v-for指令进行遍历，然后给botton标签绑定点击事件，我们预期点击按钮时，数据新增一个属性，界面也新增一行 <p v-for="(value,key) in item" :key="key"> {{ value }} </p> <button @click="addProperty">动态添加新属性</button> 实例化一个vue实例，
Vue向已定义的空对象添加的新属性和值，无法在页面上渲染。
weixin_38422903的博客
10-29 3694
问题背景： 先在data中定义了一个空对象obj:{}，ajax获取后台数据之后，将新的属性名和属性值赋给obj，结果发现页面上渲染不出数据。 个人解决方式： 重新定义了obj这个对象，把obj这个对象要从后台获取的属性全都先定义好了，形如：obj:{ a : ’ ', b : ’ ’ }。我这个方法只适合新添加的属性较少的情况，数据多时不可取。 官方文档的相关解释： 1、data是什么？ 2、...
关于vue给对象新增属性页面不会动态更新的问题
m0_51328823的博客
02-17 2934
问题 不知道大家有没有遇到过这个问题，当我们给data里面声明的对象添加一个新属性，这个新属性是不会动态更新视图的。 看一个例子 <template> <div> {{obj}}<br> <button @click="addProperty">动态添加新属性</button> </div> </template> <script> export default { data(){
vue改变对象的属性值，视图未更新
qq_39594951的博客
04-22 2148
我建立了一个对象，视图中遍历这个对象，并显示这个值,然后有个按钮，可以改变obj对象的值 <li v-for="(items,index) in obj" :key="index" >{{items}}</li> <button @click="btn">添加obj.b</button> <script> export default...
源代码-创意互动网站导航（ASP静态版） v1.0.zip
最新发布
08-24
源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip
vue3.2中，v-for中写入Proxy数据，手动触发视图更新
03-04
在Vue3.2中，如果在v-for中使用Proxy数据，可以通过手动触发视图更新来更新视图。具体的方法是使用Vue3.2中新增的$forceUpdate()方法，该方法可以强制更新组件的视图。在使用Proxy数据时，需要在Proxy对象上添加set...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值