vue 组件复用不刷新
情景:
两个路由"/a", "/b"公用一个页面组件, 在"/a"路由中, 第一列是序号, 在"/b"路由中, 第一列是多选框.
问题:
以下代码在切换时, 从"/a"跳转到 "/b", 依旧显示是序号.
<!-- 多选框 -->
<el-table-column
v-if="pageType == 'a'"
type="selection"
width="55">
</el-table-column> <!-- 序号 -->
<el-table-column
v-else
type="index"
label="序号"
width="50">
</el-table-column>
解决方法: 给两个组件各加一个不同的key
<el-table-column
v-if="pageType == 'a'"
key="a-selection"
type="selection"
width="55">
</el-table-column>
<el-table-column
v-else
key="b-index"
type="index"
label="序号"
width="50">
</el-table-column>
vue 组件复用不刷新的更多相关文章
- vue 组件复用 - component
vue 组件复用 - component vue 组件复用 就是对 component 标签的使用 先看图 下图看使用 结果: 可以看到 在箱包 这一项,我将banner 组件用了两次,我 每次 点击 ...
- Vue 组件复用性和slot
1.组件可复用 2.slot元素作为组件模板之中的内容分发插槽,元素自身可以被替换 <!DOCTYPE html> <html lang="en"> < ...
- vue 组件的强制刷新
组件 <vue-component v-if="hackReset"></vue-component> <button @click="a& ...
- vue刷新当前路由:router-view 复用组件时不刷新的3种解决方案总结
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应 ...
- vue组件重新加载(刷新)
vue组件重新加载(刷新) 第一种方法:利用v-if控制router-view,在根组件APP.vue中实现一个刷新方法 <template> <router-view v-if=& ...
- 一个简单的适用于Vue的下拉刷新,触底加载组件
一个简单的适用于Vue的上拉刷新,触底加载组件,没有发布npm需要时直接粘贴定制修改即可 <template> <div class="list-warp-template ...
- Vue.js 组件复用和扩展之道
软件编程有一个重要的原则是 D.R.Y(Don't Repeat Yourself),讲的是尽量复用代码和逻辑,减少重复.组件扩展可以避免重复代码,更易于快速开发和维护.那么,扩展 Vue 组件的最佳 ...
- Vue 组件与复用
(1)全局注册 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="U ...
- vue路由参数变化刷新数据
当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...
随机推荐
- ubuntu 16.04 国内仓库地址
deb http://mirrors.aliyun.com/ubuntu xenial maindeb http://mirrors.aliyun.com/ubuntu xenial universe ...
- 使用dbms_profiler收集存储过程每步执行时间
最近和优化团队的专家学到一个很有意义的内置包:dbms_profiler,专门用于分析Oracle存储过程中的各段代码的时间开销情况,从而快速找到性能瓶颈的步骤. 1.sys创建dbms_profil ...
- 60.Vue:将px转化为rem,适配移动端
1.下载lib-flexible 我使用的是vue-cli+webpack,所以是通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main. ...
- 关于Linux与Windows的在服务器的一些区别
我们平时说学习运维要依托于Linux系统,因为在服务器领域Linux基本取得了市场,那么Linux在服务器领域与Windows相比有哪些优势呢?我们来看下:我们选择服务器主要是成本,安全稳定,这两大方 ...
- 能否显示pdf?
<iframe src='http://km.shengaitcm.com/ADC/_layouts/15/WopiFrame.aspx?sourcedoc=%2FADC%2FDocLib16% ...
- 简单的Json数据
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- 通过js或jq增加的代码,点击事件或其他一些事件不起作用时
通过js或jq增加的代码,点击事件或其他一些事件不起作用时,可使用 $(document).on("click",".noshow",function() { ...
- vscode小程序代码高亮
vscode无法识别wxml,wxss语法: wxml文件设置: (1)任意打开一wxml文件,点击下方语言模式选择,这里已关联wxm所以当前显示wxml.默认关联为纯文本或者html或其他语法,点击 ...
- oracle修改审计功能
oracle修改审计功能 如果没有关闭审计功能,审计日志文件默认保存在位置为$ORACLE_BASE/admin/$ORACLE_SID/adump/ 关闭审计:alter system set au ...
- Fiddler使用教程(转)
Fiddler是最强大最好用的Web调试工具之一,你对HTTP协议越了解, 你就能越掌握Fiddler的使用方法.你越使用Fiddler,就越能帮助你了解HTTP协议.Fiddler无论对开发人员或者 ...