解决前端组件渲染没更新数据问题

最新推荐文章于 2024-06-05 16:20:01 发布
最新推荐文章于 2024-06-05 16:20:01 发布
阅读量2.5k 收藏 4
点赞数
分类专栏： 前端专栏 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csnz123123/article/details/128860828
版权

问题：

使用前端日期控件时 - 数据联动时数据绑定无效问题

现象：

选择A日期，想动态改变B日期数据，只有第一次选择时会动态改变B日期数据，第二次选择A日期时，B日期数据虽已改变，但是页面数据未改变
在这里插入图片描述
例如我要点击留样日期，销毁日期就得默认设置为留样日期之后的三个月，只有第一次点击，效果能正常显示，但是第二次点击，销毁日期就不会更新了…

原因

前端组件没有重新加载，一直保持旧数据

解决步骤：

使用标志位让组件每次更改刷新一次

一、前端组件绑定点击事件

在这里插入图片描述

二、新增一个标识flag

默认为true ，即组件默认显示

在这里插入图片描述

三、要联动的前端组件增加标识判断

flag为true时显示，false时隐藏

在这里插入图片描述

四、在绑定的点击事件中刷新flag标识

这样子即让组件 隐藏又展示，该组件的数据便重新渲染了

在这里插入图片描述

CSNZのBlog
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
element-ui 表格 修改后, 表格里面的数据不实时更新问题
github_37759996的博客
05-14 3398
element-ui 表格 修改后 表格里面的数据后 页面不实时更新问题 完美解 想要达到的效果：点击"更多"后，"更多"隐藏，删除和补仓显示；（有时间可全部看完，没时间直接看做法6/7） 尝试用的方法：自己用 this.show、在百度上找的方法 set 都没能成功 提示：最下面有代码demo 页面初始化： 目标效果 做法1： 给"更多"绑定一个 v-show=‘show’ 把 this.show 设置为true ，点击"更多"按钮后 在点击事件里面把this.show 设置为false； 结果1： 未成
解决angular2 获取到的数据无法实时更新的问题
10-18
在Angular2（以及更新版本的Angular）开发过程中，有时会遇到数据更新但视图未实时渲染的情况。这通常是由于Angular的变更检测策略导致的。在Angular中，变更检测是用于识别组件状态变化并据此更新视图的过程。默认...
element UI dialog里面子组件第一次未渲染数据问题
叫我起来，我还能敲代码！
08-09 775
当弹窗组件里面包裹子组件时候，第一次渲染子组件数据未渲染，子组件接收到的是undifined。在弹窗为true后用this.$nextTick来更新。
vue 的render函数中渲染element组件库的标签报错（已解决）
最新发布
sinat_41200024的博客
06-05 433
vue 的render函数中无法渲染element组件库的标签的解决办法
数据都能正常的拿到，没有报错，就是将数据渲染到页面上数据不出来
yigeboke的博客
11-08 628
错误写法 \ ---------------------------------------------------------------------- 正确写法 在为obj赋值的时候是在函数内自己定义的obj而非组件内部属性data的obj 应当采用如下赋值this.obj=res.data.msg[i]有看到obj的定义为数组，所以可以修改为： this.obj.push(res.data.msg[i]) ...
react进入页面第一次渲染——fetch数据还没获取
Astar的博客
05-29 1万+
第一次进入到页面的时候，因为需要去fetch数据，所以会在没数据的情况下有一次渲染，等fetch成功后，会再一次进行渲染。这样会导致出错可以在state中加一个isLoading...
vue开发中，数据还没获取，页面已经渲染，导致页面没有数据
热门推荐
weixin_48677331的博客
12-28 2万+
在使用vue的时候，经常会遇到这种问题：异步请求，或者是通过组件传值获取数据时，部分页面会在数据获取之前就渲染，导致数据加载不出来。 如何解决？ 使用 v-if 根据需求,可以在vue生命周期beforeCreate，created的时候就调用接口获取数据，在成功拿到数据之后的回调函数里面，控制页面显示，可以最大程度上避免页面跳动的问题。由于渲染和请求是异步的，我们可以等到数据请求回来之后，再把页面放出来。 上代码 <h4 v-if="isShow">{{ data }}</h4>
浅谈vue单一组件下动态修改数据时的全部重渲染
08-27
今天，我们将讨论在 Vue 单一组件下动态修改数据时的全部重渲染问题。 首先，让我们先来了解一下 Vue 中的数据双向绑定机制。数据双向绑定是 Vue 的一大特色，它可以使得数据的变化自动同步到视图中。然而，在实际...
微信小程序遇到修改数据后页面不渲染的问题解决
12-01
微信小程序遇到修改数据后页面不渲染的问题解决 前言： 去年从小程序一开始出来到现在，我一直是比较看好和保持一定的关注度的，小程序的掀起的波浪我觉得一开始是在前端及其他技术开发人群中的，这是我第一次有意识...
canvas 绘制的 vue 表格组件，解决上万行+多列数据渲染问题，集成大部分表格功能.zip
01-04
在现代Web开发中，Vue.js是一个非常流行的前端框架，它提供了高效的数据绑定和组件化机制，使得构建复杂的用户界面变得更加简单。然而，当涉及到大量数据的表格渲染时，传统的HTML表格元素可能会面临性能瓶颈，特别...
Vue.js组件使用props传递数据的方法
12-13
通常父组件的模板中包含子组件，父组件要正向地向子组件传递数据或参数，子组件接收到后根据参数的不同来渲染不同的内容或执行操作。这个正向传递数据的过程就是通过props来实现的。 在组件中，使用选项props来声明...
Vue子组件中 data 从props中无法动态更新数据问题
沉默的鑫的博客
05-17 1万+
问题 最近在公司写vue项目的时候，发现一个渲染问题，父组件传给子组件的数据，当该数据在父组件的中发生改变的时候，子组件中的数据不会因其的改变而去改变。 原因 经上网查证得知，是因为父组件传给子组件的数据是通过子组件的mounted阶段进行的处理，才能通过data渲染到页面上，从而更新。但是数据发生变化的时候，mounted阶段已经过了，所以data捕获不到数据的更新，从而无法更新 示例 //父组件 <add-model :addshow='addshow' ></add-model&gt
VUE+Element首次打开Dialog加载子组件数据未渲染（不显示）
学点的CSDN博客
11-16 7431
VUE+Element第一次打开弹窗组件时，父组件传给子组件的数据在视图中未显示，第二次以后再打开就可以显示（已解决）
vue 组件第一次不渲染问题_解决Vue循环中子组件不实时更新的问题
weixin_39725844的博客
12-19 1365
问题描述使用Element-UI中的table组件时会遇到一个常见的问题。当在el-table中调用子组件的时候会出现数据更新后，子组件没有重新渲染的问题。eg:资源列表中的健康度组件。代码如下： {{scope.row.name}}理论上当我更新数据的时候，sourceData的值已经发生了改变(而不是其中的某个字段发生了改变)，子组件应该获取的数据更新并重新渲染。实际上该页面的健康度组件只会保...
vue封装自定义组件，异步加载数据，渲染组件，子组件没接收到
weixin_47390278的博客
03-26 360
父组件传递对象形式接收不到，刷新也没用，但是你到编辑器里重新保存编译后，数据就回显来了
Vue等待父组件请求数据返回后，再渲染子组件
yongyafang123的博客
11-24 7311
问题描述：在写页面过程中有时子组件需要获取到父组件请求获得的数据后才能显示（比如：百度富文本的引用，回显数据的时候） 想了很多办法 最后看到这种比较可行，方便 <UE :defaultMsg=activityForm.introduction v-if="activityForm.introduction" :config=config ref="ue"></UE> 及...
vue时间轴组件_vue的组件复用与组件重渲染
weixin_39578899的博客
11-22 446
建议先阅读下面的文章：条件渲染 — Vue.js​cn.vuejs.org用vue的时候，如果你开发的页面有很多的局部状态，那么你很大几率会遇到组件重渲染的烦恼。举个例子：这是一个逻辑很复杂的web视频编辑器，用户可以在各个编辑项目之间来回切换。当用户进行项目切换的时候，我们一般的做法是，调用这个编辑器组件的fetchData方法，让所有相关数据重新拉取并重新赋值。得益于vue的响应式系统，页面中...
vue面试题之一：生命周期函数面试题
Arthas_Xue的博客
09-19 1011
1. 生命周期函数面试题 1. 什么是vue生命周期？ Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载DOM-渲染、更新-渲染、卸载等一系列的过程，我们称这是 Vue 的生命周期。 2. vue生命周期的作用是什么 Vue 所有的功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。...
rendered属性不更新问题
天下唯一的利哥哥的博客
08-19 195
jsf开发过程问题总结 rendered属性不更新问题 <h:form> ... <h:commandButton value="Login" action="#{login.submit}"> <f:ajax execute="@form" render=":text" /> </h:commandButton> </h:form> <h:outputText id="text" value="You
layui 数据表格传递给后端数据后 ，修改完 ，前端页面怎么更新表格
06-08
当后端数据修改完成后，前端页面需要重新获取最新的数据并更新表格。你可以通过以下两种方式来实现： 1. 使用表格的 reload 方法：在修改数据成功后，调用表格的 reload 方法，重新加载数据并渲染表格。 ```javascript // 修改数据成功后，重新加载数据并渲染表格 table.reload('tableId', { page: { curr: 1 // 重新从第 1 页开始加载数据 } }); ``` 其中，`tableId` 是你要更新的表格的 ID，`page.curr` 表示重新从第 1 页开始加载数据。 2. 直接修改表格数据：在修改数据成功后，直接修改表格数据并重新渲染表格。 ```javascript // 获取表格实例对象 var table = layui.table; // 获取表格数据 var data = table.cache.tableId; // 修改数据 // ... // 重新渲染表格 table.render({ elem: '#tableId', data: data }); ``` 其中，`tableId` 是你要更新的表格的 ID，`data` 是表格数据，你需要将修改后的数据更新到 `data` 中，然后调用 `table.render` 方法重新渲染表格。 你可以根据自己的实际情况选择其中一种方式来更新表格。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值