TS VUE项目中遍历节点不刷新的问题

最新推荐文章于 2024-11-04 21:48:30 发布
最新推荐文章于 2024-11-04 21:48:30 发布
阅读量648 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 随笔手记 文章标签： ts vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/AillenRen/article/details/91045513
在使用TSVue进行后台管理项目开发时，遇到点击事件修改list值但页面不刷新的问题。通过初始化默认值解决了页面联动刷新难题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

最近一直在做后台管理项目，用到ts vue相关技术。今天又踩了一个坑，我在点击事件中修改了遍历的list的值，但是页面上却怎么也不刷新？这真是为难了我胖hu好久，贴上垃圾代码已做纪念
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
找了好久才发现，要把这里初始化的时，赋一个默认值，才能联动刷新页面，以此作为自己学习的记录。
在这里插入图片描述

Vue3计算属性终极实战：可媲美Element Plus Tree组件研发之节点勾选
felix_alone2012的博客
07-26 670
前面完成了JuanTree组件的节点编辑和保存功能后，我们把精力放到节点勾选功能实现上来。注意，对于组件的开发者来说，要充分考虑用户的使用场景，组件提供的多个特性同时启用时必须要工作良好。就拿Tree组件来说，用户完全可以在启用勾选的情况下，同时启用节点增删功能，此时增删不能影响到勾选的一致性。
Vue3可媲美Element Plus Tree组件开发之append节点
felix_alone2012的博客
07-24 719
在前面的章节，我们完成了可媲美Element Plus Tree组件的基本开发。通过实现各种计算属性，tree数据状态变化引起的视图更新被计算属性所接管了，无需我们再手动做各种遍历、查找以及手动监听操作，这样后续开发高级功能变得易如反掌啦！！
vue路由缓存list，导致页面不刷新问题。
baozisss的博客
01-21 689
再缓存页面监听路有变化，根据参数来手动刷新页面 watch:{ $route(route) { if(route.path == '/storeList' && route.query.storeLevel !== this.params.storeLevel) { this.params.storeLevel = route.query.storeLevel this.reload() } } }, ...
vue绑定数组元素视图无法刷新
clark的专栏
09-04 344
问题描述： 在使用vue框架开发前端界面的过程中，遇到这么个问题：模板中某个div的属性绑定了数组的某个元素，当数组元素更新时，对应的视图却毫无变化。 官方介绍： https://cn.vuejs.org/v2/guide/list.html渲染列表中的注意事项。 解决方法： 更新数组元素的值后，使用vm.$set刷新视图 this.$set(this.arrayname, i, t...
导致VUE页面不刷新的几种情况以及解决方法
qq_30258721的博客
08-30 7288
参考文献 https://segmentfault.com/a/1190000022772025 1.Vue 无法检测实例被创建时不存在于 data 中的 property 原因：由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。 场景： var vm = new Vue({ data:{}, // 页面不会变化 template: '<div>{{
vue2修改数组或对象，但视图不刷新
热门推荐
admin00088的博客
10-13 1万+
vue2修改数组或对象，但视图不刷新的解决办法： 1. Vue.$set(官方推荐) 2. v-if静默刷新 3. Vue.$forceUpdate(手动强制更新视图) 4.Object.assign(使用修改栈能触发视图更新的特性) 5.对于数组还可以使用splice方法push()、pop()、shift()、unshift()、splice()、sort()、reverse()
vue中元素重复出现，数据不更新——加key解决
qq_42931285的博客
04-28 1369
diff算法、数据或元素结构错乱、数据不刷新
[Vue3 + TS + Vite] TipTap中遍历文档树所有节点，存储并设置所有标题
qq_45831414的博客
07-10 458
【代码】[Vue3 + TS + Vite] TipTap中遍历文档树所有节点，存储并设置所有标题。
解决Vue的项目使用Element ui 走马灯无法实现的问题
10-15
安装完成后，在项目的主文件（通常是入口文件 main.js 或 main.ts）中引入 Element UI 并使用 Vue.use 方法将其注册到 Vue 实例中： ```javascript import Vue from 'vue'; import ElementUI from 'element-ui'; ...
尚硅谷Vue3+TS
最新发布
weixin_43843606的博客
11-04 363
尚硅谷Vue3+Ts总结
Vue,更改数组的值,但页面不刷新的解决方法
大炮哥的博客
10-26 3222
Vue,更改数组的值,但页面不刷新的解决方法 直接上代码: this.$set(this.dataList,index,value); 说明: 1.this.dataList,数组 2.index,数组下标 3.需要修改的值 例子: var list = [{name:"小米"},{name:“华为”}]; this.$set(list,0,{name:"vivo"}); 那么list会放生改变,且对应的组件也会被刷新 ...
Vue中对象或数组数据更新但视图不刷新问题的解决策略
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
11-13 1万+
在vue中，数据的绑定都不用我们操心，例如在data中有一个 msg 的变量，你修改它，那么在页面上，msg 的内容就会自动发生变化。但是如果对于一个复杂的对象，例如一个对象数组，你直接去给数组上某一个元素增加属性，或者直接把数组的 length 变成0，vue就无法知道发生了改变。
vue数据变化页面list数据渲染内容不更新
weixin_39689007的博客
09-09 306
页面渲染内容不更新的原因 bug记录
在vue3中利用v-for循环使用TS文件中的变量，变量中属性的值通过语法检查报错Unresolved variable的问题
m0_64601465的博客
12-13 1319
这段代码中，本来这个**{{item.titleChinese}}**在插值语法中已经报错__Unresolved variable titleChinese__的问题。如上面所见，在用v-for时候在ts中语法检查item.titleChinese中报错Unresolved variable titleChinese。然后再把这个变量return出去的时候循环体内只要用到的属性就不会报错Unresolved variable了。
vue3+TS开启自动更新
weixin_47218354的博客
01-15 597
【代码】vue3+TS开启自动更新。
vue+ts+vue-echarts: 动态更新柱形图的数据
风一样的少年
04-08 1077
vue-echars的安装可以参考下面的文章 https://blog.youkuaiyun.com/u014686399/article/details/115112829?spm=1001.2014.3001.5501 柱形图数据更新的方法 在template中使用柱形图 <v-chart class="bar-shape" :option="histogramOption" autoresize/> histogramOption 这是为echarts的图形设置的opt
Vue 更新数据 Vue.set 的属性和方法
xiaowude_boke的博客
03-16 2528
通过 Vue.set 方法添加的属性，Vue 是可以识别到的 它也会自动渲染到页面中 在控制台输入 vm.info 查看时可以发现 新增的属性没有 get 和 set 方法，所以 Vue 监听不到 age 的变化，也就不会自动渲染到页面中了。
Vue v-for循环改变数组的值视图不更新
jingjing等待的博客
10-28 781
因为Vue修改数据是异步执行的，所以是不不会立即更新，会等到下一次DOM更新循环结束后，统一更新发生在这一次循环中修改的数据，然后同步视图更新，所以我们可以修改后自己手动强制更新视图。结合 Vue 的生命周期，调用 $forceUpdate 后只会触发 beforeUpdate 和 updated 两个钩子函数，不会触发其他的钩子函数。链接：https://juejin.cn/post/7407999205493047346。当嵌套太深时，页面也可能不更新，此时可以让页面强制刷新。
vue问题之数据更新而DOM节点不能立即更新问题（使用vue的this.$nextTick()）
牛先森家的博客
10-25 3928
vue问题之数据更新DOM节点中不能立即更新问题（使用vue的this.$nextTick()函数） 问题描述： 父组件有数组数据，遍历子组件，然后父组件里面使用子组件中的数据，但是当子组件对应的数据被删除时，页面更新了，但是当拿子组件中的数据时，却没有更新； Vue.nextTick Vue 中的 nextTick 涉及到 Vue 中 DOM 的异步更新； Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。 $nextTick 是在下次 DOM 更新循环结束
vue3+ts的树形控件怎么清除当前默认勾选的节点
06-10
要清除当前树形控件中默认勾选的节点，可以遍历整个树形结构，找到所有已经勾选的节点，然后将这些节点的选中状态都设置为未选中即可。 具体实现可以参考以下步骤： 1. 在组件中定义一个变量来存储树形结构的数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值