Bootstrap-selectpicker与v-if一起使用select不显示

在v-if中使用Bootstrap-selectpicker时出现下图所示问题

select框不显示

原因是v-if条件下的渲染和selectpicker中select的渲染顺序错误导致

解决方法为：将select延后一步渲染即可解决，采用Vue中的$nextTick()函数以及selectpicker中的selectpicker('render')重现渲染select即可

this.$nextTick(function () {$('.selectpicker').selectpicker('render');
});

在补充一个后续遇到的问题：切换显示的内容select还是显示之前的内容，使用selectpicker('refresh')和selectpicker('render')无法解决

暂时不知道原因是什么（希望有懂的大佬能指点一下），可能与之前的延迟渲染有关系

解决方法就是采用v-if摧毁之前的select并重新生成新的select即可解决

Bootstrap-selectpicker与v-if一起使用select不显示相关推荐

BootStrap selectpicker
Bootstrap Web前端CSS框架 Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是 ...
Java黑皮书课后题第2章：2.12（物理：求出跑道长度）编写程序，提示用户输入以米/秒为单位的速度v和加速度a，然后显示最短跑道长度
2.12(物理:求出跑道长度)编写程序,提示用户输入以米/秒为单位的速度v和加速度a,然后显示最短跑道长度题目题目描述运行示例补充代码块题目题目描述 2.12(物理:求出跑道长度) 假设 ...
基于Bootstrap里面的Button dropdown打造自定义select
最近工作非常的忙,在对一个系统进行改版.项目后台是MVC1.0开发的,但是前端部分已经改过几个版本,而已之前的设计师很强大,又做设计又做前端开发.而已很时尚和前沿,使用了一直都很热门的Bootstra ...
bootstrap实现下拉框dropdown选中select option 美爆了
https://www.cnblogs.com/zou1234/p/7884053.html#commentform bootstrap 官网的例子有点坑,它只给你下拉,并且美化了,但你点击下拉却不能 ...
jQuery weui Select组件显示指定值
jQuery weui有个支持单选或者多选的select弹出层,默认他是这样的第2部分选择什么值,第1部分就显示什么值,一般的场景支持是没问题了,但本次开发碰到了一个问题. 需求描述: 职业名称后面 ...
Bootstrap Table踩坑——设置多级表头后只显示第一级表头问题解决办法
今天设置了Bootstrap Table的复杂表头,设置了多级表头(两行列名),但是只能显示第一级表头(第一行的列名),第二级的表头被第一级的表头覆盖.但是我仿照其他网上的其他设置复杂表头例子都能正常 ...
html中select只读显示
因为Select下拉框只支持disabled属性,不支持readOnly属性,而在提交时,disabled的控件,又是不提交值的.现提供以下几种解决方案: 1.在html中使用以下代码,在select ...
鼠标点击出现下拉菜单html,Bootstrap导航条可点击和鼠标悬停显示下拉菜单
使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链 ...
bootstrap select二级联动
js版本 <!DOCTYPE html> <html><head><meta charset="utf-8"><title&g ...

Bootstrap-selectpicker与v-if一起使用select不显示

Bootstrap-selectpicker与v-if一起使用select不显示相关推荐

最新文章

热门文章