vue 使用v-if实现tab切换，导致数据间互相影响的原因

已于 2022-04-07 16:23:40 修改
阅读量924 收藏
点赞数
分类专栏： js vue 文章标签： vue.js 前端 javascript
于 2021-11-05 16:26:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42888568/article/details/121165758
版权
vue 同时被 2 个专栏收录
22 篇文章 0 订阅
订阅专栏
js
7 篇文章 0 订阅
订阅专栏

使用v-if做切换时，发现接口被重复调用

做数据渲染时，发现一组数据接口被重复调用

<div class="tagmsg" v-for="(item,index) in queueList" :key='index'></div>
//循环时，v-for的key值取index导致点击转换时数据发生影响
雨幕下的漫步
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue小技巧:性能优化使用篇 =＞ 路由/tab切换取消当前页面异步请求
weixin_44395929的博客
04-15 2226
//tab在前端是非常常见的一个组件, 在vue里面, 结合了双向绑定原理, 更是将页面无感刷新提升到了极致 //假设每个tab选项都需要请求一次接口(做一次异步操作) //但是假如我们有一个手速超快的人(我摊牌了, 就是我), 他在一秒钟内能切换3次tab选项, 也就是请求了三次接口, 然后他又生活在山旮旯里面, 网络请求要3 秒后才能返回结果, 他脾气不好, 来回点了9次, 才会有第一个请求的数据返回 试问如何保证返回的数据是最后一次切换后的数据 一、防抖 //不多做介绍, 防抖从原理和可行性上分析,
使用vue-router与v-if实现tab切换遇到的问题及解决方法
12-09
忽然碰到一个常见的问题，明明可以使用 v-if / v-show 可以的解决的问题，有没有必要是使用 vue-router来解决。 比如常见的 tab 切换。一时间，我有些犹豫了，有没有必要滥用 vue-router。那到底何时用才叫合理呢？ ...
vue element table 切换 数据错乱问题
阿妖的博客
11-16 2349
当多个table 使用v-if切换显示时. 并且表格的长短不一的情况下, 切换表格会出现排版和数据错乱 解决办法: 在对应的table 加上 key 属性就可以了. 还有一种情况是, 表格只有一个 但需要动态的改变数据, 就可能需要用到doLayout 方法 具体使用看element 官网的table项 ...
vue数据改变影响其他数据的问题
星辰的笔记
03-11 1250
1，改变一个下拉框，其他几个下拉框的数据会跟着改变（这些下拉框都是使用的同一个数组不同对象的数据，非相同数据） 后面发现只有push添加的数据才会出现此问题 写死的数据下拉操作是正常的，不会影响其他对象的数据 解决： 生成一个新的对象或数组，就可以解决此问题 JSON.parse(JSON.stringify(“对象 || 数组”)) 猜测是vue底层数据绑定的问题 ...
Vue-element-admin 标签页切换时，表单数据丢失问题
DevZYD的博客
07-12 2817
一、问题现象： 当打开多个标签页时，在一个页面输入框输入内容筛选搜索了数据，切换到其他页面再切换回搜索数据的页面，将会发现筛选查询输入框内容已丢失。 二、导致问题出现的原因： 路由配置name参数和对应访问vue文件内的name参数值不同导致 三、解决方法： 将路由配置 name参数 和 对应访问vue文件内的name参数改为一样即可，另外一方面，设置路由配置meta参数对象中noCache为false ...
vuex存储数据，刷新页面后导致数据丢失【亲测可用，可供参考】
^Being^
02-22 1370
问题描述 使用vuex存储全局数据后，刷新浏览器页面导致数据丢失 原因分析 刷新页面时，vue实例重新加载，因此导致store也随之被重置 store是用来存储组件状态的，而不是用来做本地数据存储的 对于不希望页面刷新之后被重置的数据，推荐使用本地存储来进行存储 解决方式 本地存储 cookie： 不适合存储大量的数据。 localStorage： 永久存储，浏览器关闭后数据不会丢失，除非主动删除数据，关闭后重开页面，将会读取之前缓存下来的数据。 sessionStorage： 在当前
element ui使用el-table时，切换tab原tab页刷新，且list列表发生错位问题
weixin_45001005的博客
08-09 3004
element ui切换tab页时，table的fix属性导致列表发生错位
在vue中使用el-tab-pane v-show/v-if无效的解决
12-28
我就废话不多说了，大家还是直接看代码吧~... <el v-model=settype tab-click=tabClick ref=tabs> 广告位设置 name=bannerset>广告位设置 推送设置 name=sendset>推送设置 权限管理 name=authset>权限管理 <el-t
解决vue中el-tab-pane切换的问题
10-15
在Vue开发过程中，Element UI库提供了丰富的UI组件，其中`el-tabs`组件用于实现标签页切换功能。在本文中，我们将深入探讨如何解决Vue中`el-tab-pane`切换时遇到的问题，以及如何优化和管理组件的渲染。 首先，问题...
vue 实现tab切换保持数据状态
10-15
在Vue开发过程中，保持数据状态是常见的需求，特别是在实现Tab切换功能时，用户可能希望在切换Tab后，之前填写的数据或者加载的内容能够被保存。本文将深入探讨如何在Vue中实现Tab切换时保持数据状态。 首先，让...
Echarts使用按钮等切换图表时，原图表数据影响！
ivan_jq的博客
04-29 989
在项目中，常常会使用按钮等切换两图表的显示，在切换时，容易发生数据污染，原图表的数据仍会保留在页面中，并且影响例外图表的数据显示。 两个图表之间使用v-if控制显示隐藏，并且在绘制图表时，实例（vue框架）。 多次调用绘制图表时，option选项默认是合并（merge）的。 const Chart = this.$refs.chart1; let Option = this.s...
使用vue开发项目的时候，异步请求数据，连续触发多次请求导致的渲染的数据列表数据错误的问题解决办法。
一键写代码的博客
08-18 9165
问题描述： 在vue类型的项目开发中，我们一般都是发起异步请求从服务器获取数据后，根据数组数据使用v-for来动态渲染数据列表。 但是，如果一个请求在pending中，再次发送一个请求，最后导致渲染的list，数据重复，或是错误的问题。 原因，就是多次请求了异步接口，一个接口没有返回，另外一个接口就发出去了。因为，ajax是一个异步操作。导致，在回调的时候，两次请求成功后的回调都会执行。就导致数据，错误了。 什么情况下发生这种现象呢？ 譬如下拉滚动加载更多 或是 tab切换。 类似，这种，点击tab标
vue中tab切换时请求数据重复问题
SoOnPerson的博客
11-05 4784
快速点击tab切换时，上一个tab的请求，会在当前的tab的list中处理，导致数据不对
v-if与v-show造成部分元素丢失的问题——v-if复用元素问题
yy的博客
08-09 360
这里复用的顺序则是从第一个同样为div的被。首先尝试将目标元素输出到控制台。内的所有内容，这种情况下，动态添加到。此时输出显然能得到正确的结果。类似的，如果此时进一步将。当页面加载时，先向id为。元素中的内容就会被清空。元素，复用时会重新渲染。隐藏的元素开始复用，即。
vue3解决切换tab页每次切换加载数据导致数据缓慢问题
最新发布
weixin_41621686的博客
01-04 1034
使用标识符来进行辨认 有两个tab页 搞个动态加载 在开头的vedioload还没开始加载的时候判断是否加载过 入股已经加载过 则返回 不要重新加载。由标签页的离线和在线数据 都分开管理 使用两个列表：即一个数组两个对象进行存储 数组的下标有tab0 tab1 动态决定 代替原来的直接覆盖数据。loadvideos会根据loadedTabs的状态决定是否需要加载数据。
vue中使用v-if出现闪现然后消失
weixin_小白鼠的博客
07-12 1825
目标效果：当访问的路径是need时就隐藏顶部的common组件具体问题：访问 http://localhost:8080/#/need，每次刷新页面顶部都会闪现一下蓝色的盒子（common.vue）相关路由： 根组件App.vue common.vue是一个蓝色的盒子 need.vue组件 解决思路 访问这个路由的时候,当前路由 route.name===‘name’，所以v-if=“false”;应当不会闪现；组件应该都不会被创建实际上每次初始化的时候，common组件都会渲染一次；方案1: 我想先将组件
Vue页面跳转后样式错乱，刷新即恢复的情况解决
07-12 1970
当点击路由跳转到文章列表页面时，就出现了文章详情页面错乱。。。但是一刷新就又好了：我的样式中解决办法：增加了两行代码
element table表格使用v-if来回切换内容冲突
素味平生的博客
06-11 5123
技术：Vue+element 问题：多个table表格使用v-if切换展示时，多个相同的标签被渲染，导致table表格渲染内容出错 如果不添加key来区分则会出现数据冲突 解决方法：给table加个:key就可以 ...
vue3 n-tab-pane 切换保持位置
06-04
在 Vue3 中，`n-tab-pane` 组件需要使用 `el-tabs` 组件进行包裹，而在 `el-tabs` 中可以使用 `v-model` 绑定选中的选项卡，然后可以通过监听 `change` 事件来获取当前选项卡的位置。因此，在 Vue3 中实现 `n-tab-pane` 切换时保持原来位置的功能，可以按照以下步骤进行： 1. 在 `el-tabs` 组件上添加 `v-model` 绑定选中的选项卡，并绑定一个变量，例如： ``` <el-tabs v-model="activeTab"> ``` 2. 在组件的 `mounted` 生命周期中，读取并记录当前选项卡的位置，例如： ``` mounted() { // 读取当前选项卡的位置 const position = sessionStorage.getItem(`tab${this.activeTab}Position`); // 如果有位置记录，则滚动到相应位置 if (position) { this.$nextTick(() => { const tab = this.$refs[`tab${this.activeTab}`]; tab.$el.scrollTop = position; }); } } ``` 3. 在组件的 `activated` 生命周期中，重新设置当前选项卡的位置，例如： ``` activated() { // 读取之前记录的位置 const position = sessionStorage.getItem(`tab${this.activeTab}Position`); // 如果有位置记录，则滚动到相应位置 if (position) { this.$nextTick(() => { const tab = this.$refs[`tab${this.activeTab}`]; tab.$el.scrollTop = position; }); } } ``` 4. 在 `el-tabs` 组件上添加 `change` 事件监听，例如： ``` <el-tabs v-model="activeTab" @change="handleChangeTab"> ``` 5. 在组件中定义 `handleChangeTab` 函数，用于记录当前选项卡的位置，例如： ``` handleChangeTab() { // 记录当前选项卡的位置 sessionStorage.setItem(`tab${this.activeTab}Position`, this.$refs[`tab${this.activeTab}`].$el.scrollTop); } ``` 通过以上步骤，就可以实现 `n-tab-pane` 切换时保持原来位置的功能了。需要注意的是，以上代码中的 `tab` 和 `activeTab` 都需要根据实际情况进行修改。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值