【vue】element强制刷新el-carousel的dom：

最新推荐文章于 2024-05-24 10:23:14 发布
最新推荐文章于 2024-05-24 10:23:14 发布
阅读量653 收藏
点赞数
分类专栏： Vue框架 文章标签： vue.js javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53791978/article/details/133561251
版权
本文讨论了在Vue.js应用中，el-carouse组件虽然数据是最新的，但DOM显示的是旧数据的问题。尝试了$forceUpdate()和$set方法无效后，作者找到了通过设置:key为新的时间戳来解决DOM更新延迟的方法。
摘要由CSDN通过智能技术生成

文章目录

一、问题:

在这里插入图片描述

二、分析:

el-carouse里面的数据是最新的，但dom却是前一个的数据
注意：使用了this.$forceUpdate();或this.$set(xx,xx);，没有效果

三、解决:
:key="new Date().getTime()"

在这里插入图片描述

Sun Peng
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue-slick-carousel：:horizontal_traffic_light:真正的SSR的Vue Slick旋转木马，专为:high_voltage:FluxLuxstay
02-05
vue-slick-carousel继承了广受欢迎的slick-carousel功能，提供了多种功能。 它已被完全重写为vue组件。 如果您试图在Vue中使用圆滑传送带，那将是一个完美的选择。 您可以以vue组件的方式使用它，而不会出现任何...
vue-split-carousel:vue的轮播组件，同时显示多个轮播项目
04-19
Vue拆分轮播 Vue的轮播组件，同时显示多个轮播项目。 2.x作为最新版本仅支持vue 3，vue 2应该使用1.x版本。 浏览器兼容性 现代浏览器，遵循vue 3兼容性。 > 1% last 2 versions not ie 11 not dead 组件结构 在...
Vue强制刷新Dom
qq_23111247的博客
03-21 9979
参考：https://segmentfault.com/q/1010000015276370/a-1020000015276972 参考：https://www.jianshu.com/p/15f26c504554 参考： https://blog.csdn.net/qq_16772725/article/details/80467492 官网： https://cn.vuejs.org/v2/...
Element-ui el-tree新增和删除节点后如何刷新tree的实例
10-14
主要介绍了Element-ui el-tree新增和删除节点后如何刷新tree的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
组件传递数据更新后，展示效果不能实时滚动
最新发布
CY_WINT的博客
05-24 222
在一个后台装修项目中写一个可滚动的模块，无数据时展示默认提示，在下方实时输入时，上方模块数据实时更新，同时当条数大于一条就开始实时滚动。
VUE强制刷新渲染DOM
li_stone_123的博客
03-28 2772
VUE 赋值后强制刷新渲染DOM
vue强制刷新dom（使用v-if）（添加key）
believet93的博客
07-10 5291
最近在一个项目中遇到一个问题，点击按钮后，只能通过子组件向后端请求数据，但是点击按钮并不能重新加载子组件，因此无法向后端请求数据。 这里我们的子组件为 childComponent，实现刷新的方法如下： <childComponent v-if="refresh"></childComponent> <button @click="handleClick"></button> handleClick() { this.refresh = fa
element 刷新
乔木丷的博客
05-19 795
element 组件全局刷新（el-tree等） 要刷新的组件加 :key=“timer” data() {} 中定义timer: ’ ’ 在想要刷新的方法中加 this.timer = new Date().getTime()
vue系列（12）：强制更新dom元素
碰碰的博客
12-13 3992
1 问题 当更新mPano.mSrc.attr 中的属性值时，v-pannellum没有进行相应的界面更新。 <v-pannellum :src="mPano.mSrc" :hfov="120" :key="mPano.mKey"></v-pannellum> 2 解决 用 :key 来阻止“复用”，当key变化时dom会被刷新。一般情况下，key可以使用当前的时间。 ...
vue-slick:Slick-carousel的Vue组件（http
05-23
$ npm install vue-slick 注意： slick-carousel官方软件包似乎将jquery用作package.json中的依赖项，尽管将其用作对等依赖项更合适，以避免使用多个版本的jquery的可能性。 注意这一点。 使用webpack您可以使用...
vue修改Element的el-table样式的4种方法
10-14
在Vue.js中，Element UI库提供了丰富的组件，其中包括el-table，用于创建数据表格。然而，有时我们可能需要根据项目需求自定义el-table的样式。本文将详细介绍四种在Vue中修改Element UI el-table样式的有效方法。 ...
vue-dom-hints:Vue devtool，用于在DOM中标识Vue组件及其SFC路径
05-01
:rocket: 安装npm i vue-dom-hints :vertical_traffic_light: 设置将其作为安装到Vue： import DomHints from 'vue-dom-hints'Vue . use ( DomHints ) 在构建中将其禁用以进行生产： if ( process . env . NODE_ENV...
vue组件强制刷新的5种方案
黎小小的博客
01-30 9663
Vue底层是双向绑定；
Vue 三种强制刷新方法的机制、使用场景、开销说明
热门推荐
Jay的博客
05-04 1万+
Vue 三种强制刷新方法的机制、使用场景、开销说明。本文章将会告诉你 $forceUpdate 正确的使用时机；key 属性为什么能实现组件强制刷新。
vue数据更新但视图（DOM）不刷新解决办法
weixin_49315886的博客
04-10 1万+
对此有什么疑问 或者 其它前端面临的问题都可以来欢迎评论 在下知道的定会帮你回答希望能够帮到你 (#^.^#)第二种：vue.$set(要操作的对象或数组, 对象key/索引, 修改后的值)第三种： vue.$forceUpdate()第一种：强制更新dom； vue数据更新但视图不刷新解决办法
vue强制刷新的方法、组件销毁
muzidigbig的博客
07-29 8854
在开发过程中,有时候会遇到这么一种情况：1.切换页面页面没有更新2.通过动态的赋值,但是dom没有及时更新,能够获取到动态赋的值,但是无法获取到双向绑定的dom节点,这就需要我们手动进行强制刷新组件,下面这篇文章主要给大家介绍了关于vue组件强制刷新的方案,需要的朋友可以参考下1.强制刷新页面，出现短暂的空白闪烁。2.h5页面在安卓机方法不兼容。 vue组件会在什么时候下被销毁? 1.页面关闭 2.路由跳转 3.v-if为false 4.改变key值
vue el-form鼠标事件导致页面刷新解决方案；vue 阻止多次点击提交数据通用方法
weixin_46020146的博客
10-20 121
vue el-form鼠标事件导致页面刷新解决方案；vue 阻止多次点击提交数据通用方法
vue 重新渲染dom
中老年程序员
03-19 844
如果需要强制重新渲染一个组件，可以使用key属性。当key改变时，Vue会认为这是一个不同的元素，并且会创建一个新的DOM节点替换旧的节点。 下面是一个简单的例子，在这个例子中，每当你点击按钮时，componentKey的值会增加，因此key属性会变化，Vue会认为需要被重新渲染。这种方法可以强制Vue去重新渲染一个组件，从而更新其DOM。
Vue3强制刷新当前组件,Carousel强制重新加载
啥也不会只能CV
02-28 2653
vue数据更新了视图没有及时刷新
vue中如何让el-carousel-item字符串滚动
03-24
你可以使用vue-awesome-swiper插件，并设置滚动效果。具体实现可以参考以下代码片段： ``` <template> <div id="app"> <swiper :options="swiperOption"> <swiper-slide> <el-carousel :interval="4000"> <el-carousel-item v-for="(item, index) in list" :key="index"> <div class="item-content">{{ item }}</div> </el-carousel-item> </el-carousel> </swiper-slide> </swiper> </div> </template> <script> import 'swiper/css/swiper.css'; import { swiper, swiperSlide } from 'vue-awesome-swiper' export default { name: 'app', components: { swiper, swiperSlide }, data () { return { swiperOption: { autoplay: true, loop: true, pagination: { el: '.swiper-pagination' } }, list: ['滚动1', '滚动2', '滚动3'] } } } </script> <style scoped> .item-content { width: 100%; height: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } </style> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Sun Peng

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值