Vue中给数据添加属性不显示的问题（Vue.set的使用）

最新推荐文章于 2024-05-20 14:03:43 发布
最新推荐文章于 2024-05-20 14:03:43 发布
阅读量1.5k 收藏 1
点赞数 1
文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41983641/article/details/113713334
版权

有时我们在页面渲染后再给某一个数据对象添加或删除一个属性时，控制台显示已经添加但是实际的显示结果没有改变，这是因为在初始化的时候会对当前已有的对象属性调用getter和setter方法才会实现响应式，后面添加的不在其中。所以需要调用Vue.set方法进行数据更新。

//一般在数据更改后调用
//this.data 是要更改的数据源，index 是索引 
this.$set(this.data,index,this.data[index])
鲁智深拳打陈冠希
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue 中调用数据出现属性不存在的问题
dishuyin5924的博客
05-17 2427
这已经是我在调用数据时趟过几次的坑了，索性记录下来防止后面再犯； 一般我们请求数据来渲染一个页面的时候，请求下来的数据基本上都是数组或是对象，再通过列表循环和插值表达式渲染的页面；在data 中提前声明接收数据的变量时若为指定类型，就直接将数据渲染到页面，在浏览器的控制台基本上都会出现 “某某属性未定义” 的英文报错；下面举个例子： 先假设请求的是下面的json 数据： { "cod...
Vue中对象的某个新增属性在页面中不显示
qq_57443373的博客
12-23 1548
总结 在开发中，我们有时会给对象新增一个新的属性。 这个属性虽然在控制台显示，但在页面中却不显示。 这是因为Vue无法探测普通的新增属性，这时候可以使用this.$set()代替 写法 this.$set( target, 'key', value ) => this.$set( 要改变的对象, '要新增的属性名', 新增的属性值 ) ...
vue3在调用接口后，数据挂载不到页面上（排查思路）
最新发布
wangzhen12138的博客
05-20 1282
如果你在使用 Vue 3 时发现调用接口后数据无法挂载到页面上，可能有几个原因。如果经过上述步骤仍然无法解决问题，建议提供更详细的代码和描述，以便更好地帮助你诊断问题。
vue明明有值却不显示的问题
翎墨袅
01-09 4970
遇过两次 一次是v-model明明有值却不显示因为值是固定的又可以用jq于是直接jq.text给显示出来了 第二次是uni-app v-for还是有值不显示原因猜测是因为套了多层request里面还有循环继续套(效率极低极不建议使用 一开始是遍历数组加字段但是v-for的时候就是不显示 但是执行方法的时候弹出是存在数据的 于是新建一数组付到新数组给v-for加索引 <view class="...
elementui vue 修改数据，数据无法回显
m0_53412031的博客
03-11 3665
注意看，在修改数据之后，发现数据会并没有回显。找了一会没发现什么问题 后来发现是，在获取数据的时候没有在data中定义。定义了就正常了。虽然说没有在data定义在获取数据的时候也会正常显示，但是在进行数据修改，再次回显的时候却无法显示。 ...
vue标签的显示隐藏属性
weixin_48860638的博客
04-14 2247
标签属性：隐藏 v-if v-if="" 效果：网页标签消失<!----> v-show v-show="" 效果：css样式display: none;
VUE遇到对象无法调用属性情况，解决方法
d294083434的博客
09-03 2890
在Vue中有时会遇到对象属性嵌套，获取数据时会遇到无法调用属性值的问题， 调式打开对象可以查看属性值是否有 下面的get set方法，如图： 如果没有使用以下方法： 1.使用this.$set(obj, key, value)/vue.set(obj, key, value) （未测试） <script> export default { data() { return { student: { name: '张三', } } .
vue给对象添加属性没有响应式的问题
weixin_47190975的博客
07-30 2527
vue给对象添加属性没有响应式的问题
Vue 数组/对象赋值，视图不更新问题
weixin_42571699的博客
05-29 1567
当这样操作数组和对象，会发现数据虽然改变了，但是视图就是不刷新 this.arr[0] = 'newValue'; this.obj.attr = 'newValue'; 解决办法： 改变数组 this.$set(this.arr, 0, "newValue"); 或使用 splice()、 push()、pop()、shift()、unshift()、sort()、reverse() 改变对象 this.$set(this.obj, "c", "newValue"); 或使用 this.obj= Ob
vue 页面页面赋值不显示，强制更新
weixin_38673922的博客
08-02 724
vue页面强制更新 之$forceUpdate()
VUE：JS中进行数组对象赋值，页面不能实时回显
干饭搬砖两不误。
04-09 4605
简介 VUE项目中，有时候进行数组对象赋值时，不能实时回显到页面中，但是打印又有新的数据在里面。 具体实现 场景一：对象赋值新的属性时，页面不能回显。 原因：该对象本身是没有这个属性的。 解决方案： this.$set(obj, 属性名, 属性值)； 案例如： this.$set(obj, "name", "张三"); 场景二：数组赋值新的属性时，页面不能回显。 原因：VUE中由于 J...
vue向数组添加字段，视图没有更新的解决方案
weixin_45899022的博客
05-08 1163
reload(item, index) { let obj = this.tableData[index] obj.isReloading = true this.$set(this.tableData, index, obj); } 附加描述： 详细描述： https://cn.vuejs.org/v2/guide/reactivity.html ...
Vue2.0 Vue.set的使用
一只小白奔向大牛的故事
02-19 915
在开发过程中，我们时常会遇到这样一种情况：当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。 根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。 受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vu...
vue双向绑定消失，数据赋值，页面无反应
weixin_42845571的博客
09-14 439
双向绑定失效
Vue2.x中对象和数组响应式的弊端和解决方案
qq_56989560的博客
04-16 688
Vue2.x中对象和数组响应式的弊端和解决方案
Vue中的$set方法
qq_44707265的博客
03-26 307
Vue中的$set方法
this.$set解决添加对象属性后，页面不显示效果的问题
aimoaimoaimo的博客
06-28 1105
this.$set解决添加对象属性后，页面不显示效果的问题
小程序 后台返回的对象数组（每个数组添加一个新的属性值）
weixin_30344795的博客
02-19 1209
upshow属性是在请求到后台的数据后逐条添加的，经常用于控制 当前数据的显示与否或者箭头的指向 //给后台返还的数据就对象加对象属性值 array.forEach((r) => { //array是后台返回的数据 r.upshow = false; //r = array[0]的所有数据，这样直接 r.新属性 = 属性值 即可 ...
Vue中给对象添加新属性时，界面不刷新怎么办?
努力的鋜
11-18 302
hello world欢迎来到前端的新世界vue.js🐱‍👓博主在前端领域还有很多知识和技术需要掌握，正在不断努力填补技术短板。您的观看就是作者创作的动力如果为对象添加少量的新属性，可以直接采用Vue.set()如果需要为新对象添加大量的新属性，则通过Object.assign()创建新对象如果你实在不知道怎么操作时，可采取$forceUpdate()进行强制刷新 (不建议)vue3是用过proxy实现数据响应式的，直接动态添加新属性仍可以实现数据响应式。
微信小程序更新数组数据，页面不刷新问题
yinge0508的博客
10-06 7352
微信小程序更新数组数据，页面不刷新问题

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值