vue之使用箭头函数导致表格无法刷新数据

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

vue之使用箭头函数导致表格无法刷新数据

1.产生背景

在使用初始化方法查询默认表单后，有使用选择器进行条件查询的需求。
在这里插入图片描述
但在使用监听器监听选择器绑定的value值时使用了箭头函数，请求响应后发现数据更新了但表格为重新渲染，仍为请求之前的数据。

2. 产生原因

箭头函数本身没有this，但是它在声明时可以捕获其所在上下文的this供自己使用。所以导致this指向不是所需vue对象，表格刷新失败。

3. 解决措施

将箭头函数改为普通函数
在这里插入图片描述

ren.janisa
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue数据更新UI不刷新显示的解决办法
11-19
vue比较常见的坑就是数据（后台返回）更新了，但是UI界面并没有更新，常见于以下情况： 一、数据为数组时 1.通过数组索引修改数组元素例如： 此时UI数据并不会刷新 2.修改数组长度时： 解决方案： 如果data为JSON数组则如下： 第一个参数为要更新数据的数组，第二个参数为要更新的数组中具体的元素下标，第三个参数为新数据 备注: 数组原型上的方法vue可直接检测到变化：push(),pop(),shift(),unshift(),splice(),sort() 二、数据为对象时: Vue 不能检测对象属性的添加或删除：你可以这样添加一个属性 如果要添加多个属性可以 补充知识：v
解析vue data不可以使用箭头函数问题
08-27
Vue 中 data 不可使用箭头函数问题解析 ...在 Vue 中，data 属性不能使用箭头函数，因为箭头函数的 this 指向问题会导致数据初始化失败。我们应该使用普通函数作为 data 函数，以确保数据初始化正常进行。
VUE表单数据不刷新问题记录
abingll的博客
04-08 1136
REDPACK_TYPE这个参数后来加的，之前保存的数据里没有这个参数，在编辑之前的数据时使用了 this.rightsInfo=res.data.data 的方式直接赋值，就导致组件里出现了formData这个对象下的数据修改的时候不会刷新，只有这个对象外面的数据修改刷新后会连带着刷新这部分数据，后改成 Object.assign(this.rightsInfo,res.data.data) 的方式赋值，就没有问题了这种奇葩问题，还是头一次遇到，记录一下 ...
vue3在调用接口后，数据挂载不到页面上（排查思路）
最新发布
wangzhen12138的博客
05-20 1163
如果你在使用 Vue 3 时发现调用接口后数据无法挂载到页面上，可能有几个原因。如果经过上述步骤仍然无法解决问题，建议提供更详细的代码和描述，以便更好地帮助你诊断问题。
element-ui 表格 修改后, 表格里面的数据 页面不实时更新问题 完美解(1)
2401_84150046的博客
04-12 515
循环的时候show给了表格所有的行，所以点击一个"更多"导致所有的"更多"都隐藏了；
vue 使用箭头函数会报错
yun_hou的博客
01-07 3201
例：vue在这种情况下会报错  watch: { selected: (val, oldVal) => { console.log(this) } } 该问题为this的指向问题，把箭头函数换掉即可 链接：https://cn.vuejs.org/v2/guide/instance.html#实例生命周期钩子  ...
vue数据更新table内容不更新解决方法
小易不止于搬砖的博客
08-08 5936
2、为table绑定一个key，数据变化时更改key值,或者使用v-if绑定一个不重复的值触发组件渲染。table组件绑定的数据变化时，页面没有重新渲染，常见于子组件中使用table组件。创建实例时 数组在vue中没有被监听到，属于非响应式数据，数组的下标变化无法监听到。1、利用vue中重写的数组方法。3、使用$set()
Vue实现表格中对数据进行转换、处理的方法
10-18
主要介绍了Vue实现表格中对数据进行转换、处理的方法,需要的朋友可以参考下
vue实现form表单与table表格的数据关联功能示例
10-17
这里使用了Vue的响应式系统，添加新的对象后，表格会自动更新以显示新数据。 `fun`方法则是用于删除表格中的数据，但这个示例中并未完成删除逻辑，需要根据实际需求补充。通常，删除操作会根据当前行的索引或唯一...
浅谈Vue中render中的h箭头函数
01-19
vue2.0新增了render方法，官方案例写的是： render: h=>h(app) 其中h是由createElement方法演变而来 render: function(createElement){ return createElement(app) } 用es6的写法就是：(只有一个个return语句，...
Vue el-table表格页面数据不同步更新的问题
m0_62116982的博客
03-12 1817
Vueel-table表格页面数据不同步更新的问题
vue 解决t-enhanced-table 表格数据发生变化后，未重新渲染｜页面不更新问题
weixin_43568851的博客
07-13 349
时，更改表格数据后请求，取服务端返回的数据对表格重新赋值，表格数据已经发生了变化，但是页面显示的数据却没更新，or无法再监听到t-enhanced-table 数据在界面上的修改。1、给 t-enhanced-table设置一个key，可以设置成boolean类型的，在对表格赋值后更新这个key;在使用t-enhanced-table。
vue中使用element table，动态列渲染异常（错行问题、数据不更新），已解决
weixin_42504805的博客
09-20 7044
vue中使用element table，动态列渲染异常（错行问题、数据不更新），已解决
vue项目中数据更新页面不刷新问题
热门推荐
qq_41538952的博客
06-24 2万+
这种情况可以分为很多种.但是究其原因就是vue3.0以下版本无法监听对象（包括数组以及对象）的变化，当数据发生变化的时候vue的刷新机制是监听不到数据变化的，所以需要我们在实际应用过程中通过各种处理来达到页面刷新的目的。 1.这是一种简单粗暴的解决方案吧,那就是在数据更新完成之后对页面进行重排和重绘操纵,但是这种方式对页面的消耗会急剧上升,不到万不得已还是不要使用的好，具体实现方法如下: 在data中定义一个阈值,比如show，初始为true; 代码实现： this.show = false; s
Vue 改变数据，页面不刷新的问题
weixin_33698823的博客
06-13 9426
更多文章 最近在用 element-ui 开发一个网站，使用 table 组件时，发现修改完数据，有时候会延迟一两秒，页面才会发生变化。 看了一下代码，发现修改数据的代码是这样的 // popupData是修改的数据，修改完后，赋值给对应的表格数据 this.tableData[this.currentRow] = this.popupData 复制代码注意事项（以下内容摘自官方文档） 由于 J...
vue表格刷新数据_引用表格数据并实现联动刷新，你用了1天，同事2秒就搞定了...
weixin_39917576的博客
12-20 775
Hello,大家好,复制粘贴相信大家在工作中每天都要用到,但是如果你只用它来粘贴数据的话那就太小看这个功能了,其实他还有一个选项叫选择性粘贴,用它我们能实现很多功能,比如快速核对数据,转换行列位置等,下面就让我们开看下它都能实现哪些功能吧一、快速引用表格数据，实现联动刷新有的时候我们想要引用表格中的数据，并且实现联动效果，经常都是使用公式非常的麻烦，但是使用选择性粘贴就能1秒搞定首先复制数据，然后...
Vue 数值改变 页面没有刷新（解决数据改变视图不更新的问题）
c_x_m的博客
05-12 1万+
解决数据改变视图不更新的问题情况描述原因解决方案当表格数据改变，表格没刷新时，并且使用了render解决方案 情况描述 值（List）修改后，打印值改变了，但页面数据没刷新 如何赋值：this.tableData[index] = { ...this.tableData[index], ...result } 想法：利用解构赋值，修改对应key的value值 例：this.tableData[index] = {id:1,name:jarry} result={id:2} 原因 解构赋值 如
vue+element 给表格添加数据，页面不实时刷新的问题
weixin_30528371的博客
06-17 8593
由于页面加载时，使用了keep-alive,keep-alive具有数据缓存作用，当在添加页面添加成功时，返回主页面没有立即更新。数据有缓存。 解决办法如下： 将获取数据列表的方法放到activated里面，不要放到mounted或者created里面。 activated是专门对keep-alive进行实时更新，亲测有效。 转载于:https://www.cnblogs.com/z...
vue内联的箭头函数
04-10
在Vue中，内联的箭头函数是一种常见的用法，用于在模板中绑定事件或者传递参数。它的语法形式如下： ```html () => methodName(parameter)">Click me ``` 在上述代码中，`@click`是Vue的事件绑定语法，`methodName...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值