uview+小程序+u-collapse-item 包含if， slot失效的问题

最新推荐文章于 2024-06-27 09:59:19 发布
最新推荐文章于 2024-06-27 09:59:19 发布
阅读量1.3k 收藏
点赞数 1
文章标签： javascript 前端 vue.js html Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fhrlhh/article/details/129037125
版权
文章讲述了在Vue.js开发中遇到的一个bug，即使用v-if控制的插槽不显示。经过排查，确认问题是v-if与slot不能同时使用。作者尝试将v-if移出外层以及放在slot内层，最终发现将v-if写在slot内层解决了问题。
摘要由CSDN通过智能技术生成

今天遇到了一个bug,说是下图的插槽一直不显示

查看代码，是一个v-if 控制的插槽，如图

首先是判断v-if的值是不是true，结果发现只因毛问题都没有，最后怀疑到v-if和slot不能同时出现这个问题上，去掉v-if，插槽显示。确定了问题在哪，就开始尝试解决问题。

首先我选择了把v-if 写在外面一层，无果

然后我把v-if写在slot的里层，问题解决

下面是代码

liberalhumblehopeful
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uView UI中Collapse折叠面板使用小记
sxy323的博客
12-05 3869
uView UI中Collapse折叠面板使用小记
slot 与v-if配合使用不生效
我只是个很菜的前端
08-11 1545
slot 与v-if配合使用不生效 slot v-if
uview折叠面板collapse-自适应高度
最新发布
m0_58665272的博客
06-27 847
uview折叠面板内容展示不全，计算高度并自适应高度
uniapp踩坑记录-uview1.x的collapse组件中使用具名插槽，在app端不生效
qq_44623314的博客
05-23 1755
uni-app踩坑折叠面板
微信小程序中uview折叠面板标题无法显示解决
q1553048604的博客
01-04 1018
解决微信小程序使用uview的折叠面板不显示标题
uni-collapse 动态数据 手风琴不生效
m0_54281860的博客
03-30 879
uni-collapse 动态数据 手风琴不生效
记录uview Collapse 折叠面板折叠内容不显示问题
qq_45670750的博客
06-20 307
解决uview折叠面板折叠内容不显示问题
uni-app+Vue3+pinia+uview-plus搭建的项目包
12-28
uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-...
uni-app+uview+vuex+分包环境搭建
03-07
uni-app是由HBuilderX团队开发的一款多端开发框架，它允许开发者编写一次代码，就可以在iOS、Android、Web（H5）、微信小程序、支付宝小程序、百度小程序等多个平台运行。uni-app的核心是基于Vue.js，利用Vue的语法...
uni-app+color-ui+uview-ui 搭建的H5端初始demo
04-09
1. **uni-app**：uni-app 是由ECharts团队开发的一个跨端框架，允许开发者编写一次代码，可以同时在iOS、Android、Web（H5）、微信小程序、支付宝小程序、百度小程序等多个平台运行。它基于Vue.js，提供了丰富的组件...
牙科诊所预约管理系统微信小程序源码，口腔诊所预约小程序源码，基于uni-app+uView开发的牙科诊所预约小程序
01-13
本文将详细讲解基于uni-app+uView开发的牙科诊所预约管理系统微信小程序源码的相关知识点。首先，我们来理解一下核心概念。 1. **uni-app**：uni-app是由ECharts团队开发的一个多端开发框架，它允许开发者使用一套...
【无标题】uniapp+ uview+u-popup弹出层 清除内部滚动
Yy986956491的博客
11-05 695
uniapp+uview+u-popup弹出层 清除内部滚动
uniapp中slot无效的问题
m0_47435082的博客
03-22 638
【代码】uniapp中slot无效的问题。
uview Collapse折叠面板无法动态设置展开问题
J_com的博客
05-10 475
uView 折叠面板无法动态展开问题
uniapp修改用户头像、u-view实现单元格右侧显示用户头像、u-cell-item 的自定义内容、自定义插槽无效
maktoub的博客
04-11 1247
发现**自定义u-cell-item 的插槽无效**， 作者在文档中提供的使用方式如下，应该是写错了，在显示头像的的同时，显示出右侧箭头
uniapp或小程序多级插槽slot会失效
哈米西的博客
07-22 4807
uniapp中使用slot插槽让用户自定义图标，插槽嵌套有三层（多层）会发现插槽失效的行为,小程序端总是显示默认内容，H5端正常。
[微信小程序]微信小程序使用slot踩坑
iChangebaobao的博客
04-30 1192
微信小程序使用slot踩坑
uniapp+uview中使用v-if控制表单项导致显示异常错乱
weixin_43109722的博客
03-21 1099
uniapp+uview中使用v-if控制表单项导致显示异常错乱
uniapp使用uni-collapse后，高度丢失的问题解决
qq_43351090的博客
11-24 4543
uniapp使用uni-collapse后，高度丢失的问题解决一、复现？二、出现的原因三、解决方案 一、复现？ 我在A页使用uni-collapse，数据为循环中的值，当我从A页跳转到B页，再点导航栏的返回键时，折叠面板中的内容直接丢失，截图如下。 二、出现的原因 通过调试发现，是子面板的style的height属性被自动修改为0。 三、解决方案 查看官方文档后发现： resize 方法解决动态添加数据，带动画的折叠面板高度不更新的问题 需要在数据渲染完毕之后使用 resize 方法。推荐在 this.
使用uview的小程序中用u-select列表分类查询数据
05-26
可以按照以下步骤使用u-select列表分类查询数据： 1. 在需要使用u-select的页面中，引入u-select和u-list组件： ```html <template> <view> <u-select v-model="selected" :options="options"></u-select> <u-list :list="filteredData"> <view slot="default"> <!-- 渲染列表项 --> </view> </u-list> </view> </template> <script> import { uSelect, uList } from 'uview-ui' export default { components: { uSelect, uList }, data() { return { selected: '', options: [{ value: 'option1', label: 'Option 1' }, { value: 'option2', label: 'Option 2' }, { value: 'option3', label: 'Option 3' }], data: [{ name: 'Item 1', category: 'option1' }, { name: 'Item 2', category: 'option2' }, { name: 'Item 3', category: 'option3' }] } }, computed: { filteredData() { // 根据选择的选项过滤数据 if (!this.selected) { return this.data } return this.data.filter(item => item.category === this.selected) } } } </script> ``` 2. 在data中定义selected变量和options数组，分别表示当前选择的选项和可选的选项列表。 3. 在data中定义data数组，表示要展示的数据列表。 4. 在computed中定义filteredData计算属性，根据选择的选项过滤数据。 5. 在模板中使用u-select组件和u-list组件，并将options数组作为u-select组件的参数。 6. 将filteredData作为u-list组件的参数，并在u-list组件内部使用slot来渲染列表项。 7. 根据需要自定义列表项的样式和点击事件等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值