vue 删除对象某个属性 渲染不更新问题

已于 2023-08-21 14:42:58 修改
阅读量591 收藏 1
点赞数
分类专栏： 前端问题经验 文章标签： vue.js javascript 前端
于 2022-05-27 23:38:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51688013/article/details/125012745
版权

问题

如下代码删除对象中的某个属性，vue中for渲染不更新

 let newSearchCondition = this.searchCondition
 delete newSearchCondition[index]
 this.searchCondition = newSearchCondition

解决方法

只需在最后加上this.$forceUpdate()使它强制更新即可，亲测有效

let newSearchCondition = this.searchCondition
delete newSearchCondition[index]
this.searchCondition = newSearchCondition
// 强制更新
this.$forceUpdate()
顾北顾
关注
专栏目录
vue FormItem 动态遍历多层prop绑定 编辑回填信息后新增删除操作页面不渲染
愿你走过半生，归来任是少年。
07-31 1009
vue FormItem 动态遍历多层prop绑定 编辑回填信息后新增删除操作页面不渲染
清空对象值无效，界面不刷新
weixin_44770377的博客
04-13 544
如图，点击清空对象设置为{}，但是界面不渲染。 方法一、强制渲染指令 this.searchForm = {} this.$forceUpdate(); 方法二、用this.$set的赋值方法 //this.searchForm.isNew=1 this.$set(this.searchForm ,'isNew',1) 方法三、遍历对象，对属性赋值为空 // this.searchForm=...
vue 修改对象属性 页面不重新渲染
遇见一个人流泪的博客
10-31 3379
官方解释： Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。 注意事项 在给对象赋值时一定要保证新的对象拥有其所有响应的属性，否则修改到非响应属性时也会造成页面不重新渲染。 ...
[vue] detele删除对象属性时视图不能响应更新
最新发布
qq_14993591的博客
07-15 288
此时若在methods中使用 delete this.obj.a 或者 delete this.obj[“a”]会发现视图中的li不会实时更新，这种情况是由于原生delete并不能被vue检测到变化。
vue里面怎么删除部分页面_vue中数组删除，页面没重新渲染
weixin_39709262的博客
12-19 1281
创建一个组件时，数据类型是数组，在删除这个数组中的数据时，数组中的数据是对的，但页面渲染的数据却不对。举例：(不一定复现){{item.name}}删除export default {data() {return {peoples: [{name: 'tom',id: '1'},{name: 'kitty',id: '2'},{name: 'jack',id: '3'}]}},methods: {...
vue中数组删除，页面没重新渲染
u011927449的博客
07-21 2462
创建一个组件时，数据类型是数组，在删除这个数组中的数据时，数组中的数据是对的，但页面渲染的数据却不对。 举例：（不一定复现） <ul> <li v-for="(item, index) in peoples" :key="index">{{item.name}} <span @click="del(index)">删除</span> </li> </ul> <script>
vue 对象中数组中对象某个属性更改_vue数组中对象属性变化页面不渲染问题
weixin_39947351的博客
12-19 322
问题引入Vue之所以能够监听Model状态的变化，是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化。但是，对于数组元素的赋值，却没有办法直接监听。因此，如果我们直接对数组元素赋值{{item.name}}--{{item.age}}data(){return{arrInfo:[{'name':'zuobaiquan','age':22}...
详解Vue改变数组中对象的属性不重新渲染View的解决方案
10-17
在某些情况下，开发者需要改变数组或对象中的某个属性值，同时希望视图能够相应地更新。 为了解决这个问题，Vue提供了Vue.set方法，或者在实例中使用this.$set方法，用于向嵌套的对象添加响应式属性。当需要改变...
Vue实现动态添加或者删除对象和对象数组的操作方法
10-17
总的来说，Vue 实现动态添加或删除对象和对象数组的关键在于理解数据驱动视图的原理，即通过修改 `data` 中的数组来更新视图。使用 `push`、`splice` 等数组方法，结合 Vue 的响应式系统，可以轻松实现这类功能。...
Vue 数组和对象更新,但是页面没有刷新的解决方式
10-16
这将强制组件重新渲染，但请注意，这不会触发任何计算属性或侦听器的更新，所以它并不总是解决问题的最好办法。 总结来说，当Vue数组或对象的更新未能触发视图刷新时，通常是因为我们以非响应式的方式改变了数据。...
解决Vue 通过下表修改数组,页面不渲染的问题
08-27
解决Vue通过下表修改数组页面不渲染的问题很简单，只需要更新数组元素的属性，而不是直接赋值。同时，我们也可以使用splice()方法来删除和添加元素，以达到“赋值”的效果。希望这篇文章能够帮助开发者解决这个问题...
vue2添加或删除data中定义对象的属性，界面不更新
qq_40576178的博客
09-06 3462
1、在vue2中，如果在data函数中定义了一个对象，但是在methods中想要给对象添加/删除属性，直接添加/删除数据会变，但是界面不会变化。 2、如果给对象中的数组，通过索引方式修改 界面也不会变化 data(){ person:{ name:'哈哈', age:18, info:['抽烟', '喝酒', '烫头'] } }, methods:{ clickBtn(){ this.person.sex = '男' //如果在模板中使用sex，页面不会显示数据 } } 添加
vue中detele删除对象属性时视图不能响应更新 - 解决办法
weixin_30411997的博客
05-25 366
如下代码片段 // js obj = { a: 123, b: 223, c: 323 } // html <li v-for="item in obj">{{ item }}</li> 此时若在methods中使用 delete this.obj.a 或者 delete this.obj["a"]会发现视图中的li不会实时更新，这种情况是由于原生del...
vue对象新增属性、删除属性，直接通过下标修改数组、页面未更新如何处理？
浮生的博客
03-23 1793
使用this.$set（）方法处理，具体如下： <template> <div class="home"> <div v-show="obj.sex"> 性别：{{obj.sex}} </div> <button @click="addSex">添加性别</button> <div> {{arr}} </div> <button @
vue 修改对象属性方法
weixin_44794123的博客
06-27 1937
【代码】vue 搜索清空对象属性的值方法。
delete 删除对象属性&变量
楠姐的博客
08-09 2116
delete 用于删除对象的某个属性,如果没有指向这个属性的引用，那它最终会被释放 参数 object 对象的名称，或计算结果为对象的表达式。 property 要删除的属性。 返回值 对于所有情况都是true，除非属性是一个自身的 不可配置的属性，在这种情况下，非严格模式返回 false。 1. 对象属性删除 function deleteFun(){ this.name = 'haha'; } let obj = new deleteFun(); console.log.
vue3的使用-以uniapp为主
weixin_71807421的博客
04-05 924
let popup = ref(’xxx‘) // 数据类型let state = reactive({ // 多套一层，避免失去响应式list:[{}]})获取元素dom（以uniapp为例）底部弹出 Popuplet popupRef = ref(null) // 定义。
浅谈vue3reactive
qq_48018288的博客
07-04 2853
仅个人理解
Vue3 中的 set() 和 delete()
wj1713520的博客
03-19 8117
在vue2中，我们使用set来设置对象的属性，让这个属性能够在页面中响应（显示出来）。 但是，vue3中不再需要使用set方法来实现响应了。 data() { return { person: { name: 'Wj' } } }, methods: { addAge() { this.$set(this.person, 'age', 22) // vue2中的做法 } // vue3中的做法 methods: { addAge() {
Vue响应性原理与解决数组对象属性变更不渲染View的问题
"这篇文章除了探讨Vue的响应式原理之外，主要关注的是当Vue应用中遇到数组内的对象属性改变但视图未更新的问题，以及如何解决这个问题。文章指出，由于JavaScript的限制，Vue在实例化时对data对象的属性进行了转换，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值