异步获取数据后，v-for重新渲染图片列表,用this.$nextTick()解决

最新推荐文章于 2024-04-16 14:42:06 发布
最新推荐文章于 2024-04-16 14:42:06 发布
阅读量3.4k 收藏 3
点赞数 1
文章标签：   v-for nextTick vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/godelgnis/article/details/88837610
版权

最近在完成学校的一个作业

大概效果是这样的

使用v-for异步获取数据后要重新渲染视图

但是我更新了数组数据之后，发现v-for没有重新渲染

 

可以看到数据变了，视图没变

于是在网上搜索解决方案，强制刷新this.$forceUpdate()，改变数组this.$set(this.tableData[id],"red",true)之类的，没有效果

也有可能是我用的姿势不对，毕竟是第一次写前端，完全小白........

最后看到一个this.$nextTick()，网上的博客都讲得很牛逼，感觉很厉害的样子

试一下

完美解决

 

Tips:如果没有将原来的数组先清空就直接在nextTick里面给数组赋值，那么原先渲染在页面上的视图不会被清掉，它会在把新的数据渲染到原本的视图后面，所以一定要先清空原来的数组

 

 

 

 

 

 

 

godelgnis
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue.js 如何确保在异步获取成功之后，才进行页面渲染？
DreamFJ的博客
01-11 1062
在异步请求回来后或者事件监听到后再去实例化Vue
vue项目 利用异步特性实现图片懒加载
川上饺子的博客
03-10 1834
一、前言 标题中写的“vue 图片懒加载...“，虽然确实是在vue项目中写的，但其实这篇文章主要讲的是一个思路，无论是不是在vue中，都是这个道理。 二、简单介绍 本文的懒加载是针对如下情况：通过调用接口，获取当页的用户信息（包括用户头像）。但这个时候数据中的头像不能直接通过<img>展示出来，而是需要先调用接口转为base64 ，例如：<img src="data:image/png;base64,iVBO..."/> 。这个时候有10条用户信息，就需要调用接口读取图片10
Vue中的异步更新是如何实的？
最新发布
有我更精彩的博客
04-16 453
在下一个事件循环周期中，Vue会批量地处理队列中的变化，以提高性能。这种机制保证了数据变化的响应是异步的，而不会立即更新DOM，从而避免了频繁的重绘操作。在Vue中，当数据发生变化时，Vue会异步地更新DOM，这是Vue响应式系统的核心。这正是Vue中异步更新的表现，通过事件循环和虚拟DOM的优化，Vue可以高效地处理数据更新并更新DOM。总的来说，Vue中的异步更新是通过利用JavaScript事件循环机制和虚拟DOM技术来实现的，这一机制保证了数据变化的响应是异步的，从而提高了性能和用户体验。
v-for循环出的数据怎么修改其样式（this.$nextTick）
ZFZ5720
03-07 3974
今天忙公司的vue项目，忽然遇到一个问题，循环出来的数据怎么修改它的其中的样式 &lt;ul id="tbUl"&gt; &lt;li v-for="item in date" class="wLi"&gt; &lt;span class="circle"&gt;&lt;/span&gt; &lt;span c
vue中用Element-ui封装表单(form)和表格(table)组件动态渲染数据展示
热门推荐
前端探险家的博客
11-20 1万+
老样子，先来个效果图
前端清空表单数据的几种方式
xjh_527的博客
06-09 3379
第一种 : 清空表单 普通清空 用于修改 2中写法都行 this.refs.form.resetFields();this.refs.form.resetFields(); this.refs.form.resetFields();this.refs[‘form’].resetFields();
Vue中this.$nextTick的作用及用法
11-21
每当数据被访问或修改时，getter和setter会通知Vue的观察者（watcher）系统，进而触发组件的重新渲染。然而，如果在组件创建之后动态添加或删除`data`对象的属性，Vue将无法检测到这些变化，因为初始化时并未对它们...
Vue 解决通过this.$refs来获取DOM或者组件报错问题
10-15
在这种情况下，仍然需要在DOM渲染完成后访问，如使用`this.$nextTick()`。 4. **获取样式的问题**：需要注意的是，直接通过`this.$refs.name.style`获取CSS样式可能无效，因为这通常适用于原生DOM元素。对于组件，...
详解Vue + Vuex 如何使用 vm.$nextTick
08-28
这意味着，在修改数据后，DOM 还没有更新时，使用 vm.$nextTick 可以确保代码在 DOM 更新后执行。 例如，在下面的代码中，我们使用 vm.$nextTick 来确保代码在 DOM 更新后执行： ``` vm.message = 'changed' Vue....
详解vue中$nextTick和$forceUpdate的用法
12-13
this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行,在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。 应用场景： 1、 在Vue...
nextTick（）的简单理解
weixin_57696123的博客
05-07 1788
当网页数据更新了，并且在dom中渲染后，自动执行该函数，当项目中你想在改变DOM元素的数据后基于新的dom做点什么，对新的DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中，通俗的理解是：更改数据后当你想立即使用js操作新的视图的时候需要使用它 在使用某个第三方插件时，需要在vue生成的某些dom动态发生变化时，重新应用该插件，也会用到该方法，这个时候就需要在$nextTick的回调函数中执行重新应用插件的方法 注意：nextTick只是dom渲染完成进行操作，但是有时还是没有加载
elementUI Cascader 级联清空选中节点
疑问 搜索 动手 解决 记录
02-04 2581
给cascader组件设置一个ref // 清空级联选择器选中状态 this.$refs.cascader.$refs.panel.clearCheckedNodes() // 清除高亮 this.$refs.cascader.$refs.panel.activePath = [] 还有一种 let obj = {} obj.stopPropagation = () =>{} try{ this.$refs.cascader.clearValue(obj) }catch(err){
vue this.$nextTick()
xinxin7789的博客
02-22 390
vue this.$nextTick()
Vue 循环渲染 v-for
xiaowude_boke的博客
12-14 346
Vue 循环渲染 v-for
Vue中的循环渲染v-for
m0_59345890的博客
08-31 3136
解决方案：采用嵌套写法，将v-for放在外层，v-if放在里层，用vue推出的template标签装v-if，为什么要用template标签呢，因为如果用其它标签渲染完成以后，v-if在那个标签也会被生成，但是它没有用，还浪费资源，所以我们用template标签，可以理解为dom操作中的fragment，完成任务过后他就会自动消失。v-for指令非常重要，它可以遍历数据容器，可以理解成我们以前使用的for in 循环，在很多地方都需要使用它，例如我们网络请求到数据一般都是采用v-for遍历渲染到页面上。..
uni-app - v-for 循环渲染多个 “重复“ 子组件（仅 ref 不同，this.$refs.xx 使用时依然能准确找到子组件）将子组件 ref 设为动态，这样每个子组件都是 “独立“ 的！
王佳斌
02-21 4009
uniapp 组件ref 怎么是变量，uniapp 组件的refs如何绑定变量，循环数组v-for中使用refs，uniapp 父组件循环使用refs调用子组件方法，uniapp ref 和 v-for 结合，uniapp 循环动态设置ref并获取$refs方式，uniapp中 $ref的使用(v-for组件内使用ref)，uniapp循环渲染子组件，uniapp如何让组件的ref变成动态的，uniapp怎么将循环体内插入子组件，uniapp把组件ref设为动态,然后用refs再找到，uniapp 动态赋值
Vue学习——使用v-for渲染后，改变列表里的某个数据并可以二次渲染
ouxian1998的博客
05-30 1991
前言 vue的导入 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> or: <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> 问题 问题描述：通过v-for渲染表格，在第一次渲染成功后，修改了某个单元格内容，第二次渲染时该单元格内容未改变（同行其他单元格内容成功渲染） 问题分析：渲染成功后直接修改
vue学习之的v-for,:key,@,ref,nextTick的使用以及生命周期函数介绍
armwind的专栏
01-23 769
1.v-for,:key,@,ref 下面是官方的文档，可以点进去看下，最好结合例子实践下。 v-for官方文档 key官方文档 ref官方文档 nexttick官方理解 例子 例子可以直接拷贝到(https://www.runoob.com/try/try-cdnjs.php?filename=vue2-v-for)实践。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>
uniCloud.callFunction方法回调成功数据时使用this.$nextTick报错this.$nextTick is not a function
02-28
当云函数调用成功后，可以通过回调函数获取返回的数据。关于this.$nextTick报错的问题，可能是因为在uniCloud中没有定义this.$nextTick方法。 this.$nextTick是Vue.js框架提供的方法，用于在下次DOM更新循环结束...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值