vue-infinite-loading 过滤器tab正确使用
业务逻辑涉及loadmore,filter和tab切换,框架是vue,使用vue-infinite-loading中的一点经历。
identifier 一开始并没有重视这个参数,只是他的官网说identifier适用tab切换,filter。但因为初次使用一开始并没有使用,导致遇到很多坑。
坑主要集中在,切换状态后infinite组件并没有刷新数据,一开始做的逻辑是 组件使用v-show控制状态,mouted加载数据,然后infinite组件做loadmore,
之后有改成v-if控制组件重启加载,这也只是解决了一部分bug,但是还是有问题,因为状态切换的初始数据需要单独做,当v-if加载infinite组件,导致会加载重复数据,
最后才使用identifier属性,因为infinite放在一个组件中,所以identifier数据需要computed监听否则,props的数据并没有更新。
还有就是 tab切换的时候需要把infinite的数据清空,否则会不能触发加载,如果高度够的话
vue-infinite-loading 过滤器tab正确使用的更多相关文章
- vue教程2-06 过滤器
vue教程2-06 过滤器 过滤器: vue提供过滤器: capitalize uppercase currency.... <div id="box"> {{msg| ...
- vue打包后显示空白正确处理方法
vue打包后显示空白正确处理方法是 1.找到配置文件(js与css加载不上) 修改 这样打包处理可以打开但是页面样式会找不到 2.修改(针对css中的图片加载不上) 找到对应的位置加上publicPa ...
- Vue学习之过滤器和自定义指令小结(三)
过滤器: 过滤是一个数据经过了这个过滤之后出来另一样东西,可以是从中取得你想要的,或者给那个数据添加点什么装饰.过滤器就是过滤用的工具.渲染数据用的!!! 我们需要知道的是: 1.Vue中的过滤器不能 ...
- 黑马vue---28、vue中全局过滤器的基本使用
黑马vue---28.vue中全局过滤器的基本使用 一.总结 一句话总结: vue中的过滤器可以传递参数(根据参数来过滤),也可以用管道符拼接多个过滤器:例如<p>{{ msg | msg ...
- 第二章 Vue快速入门-- 24 过滤器-Vue中全局过滤器的基本使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- Vue 中的过滤器的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue.js之过滤器,自定义指令,自定义键盘信息以及监听数据变化
一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 ...
- vue 日期时间过滤器
来自:https://blog.csdn.net/m0_37068028/article/details/72898154 侵删 来自:https://segmentfault.com/a/11900 ...
- vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus
vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...
随机推荐
- 编写一个函数,输入n为偶数时,调用方法求1/2+1/4+...+1/n,当输入n为奇数时,调用函数1/1+1/3+...+1/n
需求:编写一个函数,输入n为偶数时,调用方法求1/2+1/4+...+1/n,当输入n为奇数时,调用函数1/1+1/3+...+1/n package com.Summer_0511.cn; impo ...
- Comb使用2
只需添加如下内容 AndroidManifest中添加如下 不要忘记修改application ID与Comb对应 最好不要采用将combSDK lib文件添加到工程中否则可能连接不了Comb 如果添 ...
- SLF4j 居然不是编译时绑定?日志又该如何正确的分文件输出?——原理与总结篇
各位新年快乐,过了个新年,休(hua)息(shui)了三周,不过我又回来更新了,经过前面四篇想必小伙伴已经了解日志的使用以及最佳实践了,这个系列的文章也差不多要结束了,今天我们来总结一下. 概览 这篇 ...
- Linux服务器上搭建codis集群之——安装前环境准备
codis是redis的分布式集群模式,由豌豆荚开源,本文简单记录一下它的集群搭建方法. 首先介绍一下我的实验环境.三台配置相同的虚拟机, [root@test ~]# ip a|grep -w &q ...
- [redis读书笔记] 第一部分 数据结构与对象 整数集合
typedef struct intset { // 编码方式 uint32_t encoding; // 集合包含的元素数量 uint32_t length; // 保存元素的数组 int8_t c ...
- Hadoop fs 使用方法
hdfs的基本命令 hdfs dfs -help 查看帮助 在HDFS的文件系统中,HDFS只支持绝对路径 1.-ls: 显示目录信息 hadoop fs -ls / 列出指定目录下的内容 2. ...
- 使用jQuery的插件jquery.corner.js来实现圆角效果-详解
jquery.corner.js可以实现各种块级元素的角效果,以下为演示,详见jquery_corner.html中的注释部分,并附百度盘下载 jquery_corner.html代码如下: < ...
- onboard procossor and cross-compile
星载处理器 ERC32-TSC695F The European Space Agency’s ERC32 is a microprocessor implementing a SPARC V7 pr ...
- 杭电------2048神上帝以及老天爷(C语言写)
#include<stdio.h> ] = { -,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,- }; ] = { }; long long jiec ...
- el-menu 菜单展示
<template> <div class="tab-container"> <el-menu class="el-menu-vertica ...