uniapp循环使用collapse组件在app上数据显示undefined的解决方案

最新推荐文章于 2024-07-19 12:09:31 发布
最新推荐文章于 2024-07-19 12:09:31 发布
阅读量3.8k 收藏 2
点赞数
分类专栏： uniapp 文章标签： uni-app app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43351090/article/details/121692188
版权
"在uni-app中使用v-for循环内嵌uni-collapse组件时，遇到在App真机上数据显示为undefined的问题。错误日志显示为Notfound错误。解决方法是在uni-collapse组件上添加key属性，值为循环项的唯一标识，如`key="item.id"`。此问题在H5环境中表现正常，但在App端需特别注意组件的key设置。"
摘要由CSDN通过智能技术生成

复现

在外层使用循环，内嵌uni-collapse组件后，在app真机上数据显示为undefined，h5可正常显示。保错如下：

09:52:47.329 Not found -1;-1,20-0,21-3 at view.umd.min.js:1
09:52:47.360 Not found -1;-1,20-1,21-8 at view.umd.min.js:1
09:52:47.455 Error: Not Found：Page[1][-1;-1,20-1,21-8] at view.umd.min.js:1
09:52:47.485 Error: Not Found：Page[1][-1;-1,20-0,21-3] at view.umd.min.js:1

在这里插入图片描述

一、代码如下

<view class="first-card" v-for="item in messageList" :key="item.id">
		<uni-collapse>
		</uni-collapse>
</view>

二、解决方案

给uni-collapse组件加个key就好

 <uni-collapse :key="item.id">
Acardia_Liu
关注
专栏目录
uniapp 在函数里面调用一个函数，报undefined
yxm_136452789的博客
09-23 1671
uniapp 在函数里面调用一个函数，报undefined。
uniapp使用uview组件的Collapse 折叠面板，动态渲染之后计算面板的高度
qq_39147047的博客
12-24 1万+
uniapp使用uview组件的Collapse 折叠面板，动态渲染之后计算面板的高度 在uniapp里会有使用uview的Collapse折叠面板的情况，但在动态渲染数据之后，面板的内容会显示不全，这时候可以使用ref来重新获取高度； <u-collapse ref="collapseView"> <u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index"> {{it
uniapp app端uni-nav-bar显示成了Undefined，页面顶部显示Undefined。
qq_43807473的博客
10-29 2144
2.页面处理数据错误，比如，对未定义的字符串进行处理，.split()。等等各种渲染数据时的错误。大半夜记录一下改的一个bug，这个bug很蠢，但是没真机运行调试，又一直以为是样式问题。1.页面某个数据初始化的时候没有被定义，比如html用到了未定义的对象或属性。就这个navbar组件直接不显示了，然后显示为undefined。
解决Error: Not Found：Page[5][-1,81] at view.umd.min.js
weixin_43066287的博客
07-19 494
解决Error: Not Found：Page[][] at view.umd.min.js
uniapp小程序加载出现undefined的问题
m0_48893127的博客
12-12 2749
数据加载慢，出现undefined的问题，提升用户的体验
uniapp组件出现undefined
重庆科技学院XMY的博客
04-07 6329
首先检查脚本（也就是<script>标签）内的数据名以及数据函数位置有没有语法错误 最重要的坑就是：每次写完必须重启小程序，注意不是重新编译！！！ ...
uniapp打包成apk之后页面上的标签全部显示undefined
Ciao345的博客
11-07 2353
我的页面标签加载速度比我这个请求快多了 我的mydata.content是没有值的 就是个空 在页面上渲染的时候最多就显示个空白 但是当我用方法去处理他的时候 对一个空值调用方法 就立马渲染失败 然后页面上所有的标签也都加载不出来了。正常来讲是没有问题的 因为我请求拿到的值是有mydata.content中的content就算暂时没有我的页面上也是个空值等请求一来就好了 开发时也如我所料 浏览器上运行也没有任何问题。最后解决方法也很简单提前声明好就可以。
uniapp折叠面板使用
weixin_47517176的博客
06-24 5161
uniapp折叠面板使用
如何在Vue.js和ElementUI框架中获取Collapse组件最后选中的值
游海东的技术专栏
12-20 3136
1、问题描述 在Vue.js + ElementUI组合框架搭建的项目中，如果要使用Collapse组件，获取对应最后选中项目的值，该如何实现呢？首先，需要判断点击了多个，Collapse组件返回值是什么形式的；然后，根据具体的值，对结果进行处理；最后，获取最后选中的项目值。 2、实现源码 2.1 组件 AccordComponents.vue <templat...
vue-demo-collapse:显示演示的Vue组件和一个“显示代码”按钮来扩展源代码-Show source code
03-24
显示演示的Vue组件和一个“显示代码”按钮来扩展源代码 安装 $ npm install vue-demo-collapse 用法 创建一个组件，将您的演示传入，并将该演示的源代码包装在组件中。 < script > <!-- ...
uni-app自定义组件以及使用方式
m0_60161060的博客
09-08 381
1 components文件夹下创建vue文件 <template name="page-head"> <view class="uni-page-head"> <view class="uni-page-head-title"...
uniapp写小程序，在一个方法内调用另外一个函数总是告诉我undefined ?如何解决？
anjignren的博客
07-31 5665
说一下情景： 写的一个小程序商城项目，购物车界面为 tabBar中的一项。在删除购物车中的一项之后（Delete()函数），进行页面刷新。 页面的刷新： 一般的做法： 在非tabBar界面中，通过redirectTo重新定向到本页面，也可以达到数据的刷新效果。 但是：这个是tabBar界面，redirectTo无效。所以，我自己的设想是，通过重新调用获取数据的函数，来进行页面的刷新。但是，总是提示我这个函数 undefined 原因：this的指向不正确。 我自己的购物车页面中： 看下面的报错：获取数据列
uniapp微信小程序v-for循环绑定事件传值为undefined
LSFonline111的博客
03-06 605
解决：将:key="item.index"改为 :key=“index”，就可以了。uni-app 中的v-for中 在点击传值的时候函数中在页面输出的是有效值。问题：可能是key出现问题，key需要有效值(但是它又有值！在微信开发者工具中打开输出的却是undefined。item.image和item.name都是有值的。
uniapp，在一个方法内调用另外一个方法提示我undefined ?如何解决？
詹Sir的博客
02-28 2827
原因：this的指向不正确。 解决办法： 在 export default 外面 定义一个变量： 同时在created(){}函数中把this的值赋值给他 通过_self.函数名称即可以调用到这个函数。
uniapp中开发小程序使用ref获取dom实例，一直显示undefined，竟然发现是这个原因！
柑橘乌云_
04-15 1万+
uniapp使用ref获取dom实例是undefined，ref获取不到dom实例
uniapp关于this.$refs.xxx获取组件出现undefined的解决方法
热门推荐
陆撄宁的博客
08-21 1万+
项目场景： 开发一个产品使用到比较复杂且独立的自定义组件，自定义组件是自定义复选框/单选框 问题描述： 用ref 注册子组件，父组件可以通过this.$refs.xx.fn调用子组件里的函数，但是有时会出现 undefined 未定义的情况。 vue代码 <view class="sg-checkbox"> <helang-checkbox ref="checkbox" @change="onChange"></helang-checkbox> </view&gt
uni-app路由传值undefined解决
nubdhsj的博客
04-04 2071
我去看了uni.app的官网解释url有长度限制，太长的字符串会传递失败，可改用。，另外参数中出现空格等特殊字符时需要对参数进行编码，如下为使用。我在项目的时候通过路由传参过去显示undefined。//这样就可以解决路由传参的bug。对参数进行编码的示例。
uniapp组件-uni-collapse折叠面板
03-02 1万+
官方示例：https://ext.dcloud.net.cn/plugin?id=23 效果图： 代码实现： <template> <view> <uni-collapse :accordion="true"> <uni-collapse-item title="标题文字1"> <text class="content">折叠内容主体，可自定义内容及样式</text> </uni-col
uni-app 关于undefined和null 作为判断条件
Gao_Chuanhui的博客
03-23 2900
前提需求：后台得到的数据对象中的某个值没有。会提示undefined,此时可以作为if 条件语句的判断，在条件判断中 undefined 的作用=false 具体业务：已报价时间为空且截至报价时间大于等于此刻的时间-----可报价 具体代码： export default{ data(){ return{ allow:false //控制是否可以报价 } }, methods:{ getData(){ //后台请求得到数据后 // 判断报价单，是否允许报价 i
uniapp组件库中Collapse 折叠面板如何去掉箭头
最新发布
09-28
在uni-app组件库中，如果你想要去掉Collapse折叠面板的默认展开/折叠箭头，可以使用`arrow`属性，并将其设置为`false`。以下是步骤： 1. 首先，在需要应用此样式的折叠面板元素上添加`collapse`组件的基本结构，例如： ```html <view class="collapse"> <uni-collapse v-model="isExpanded" :arrow="false"> <view slot="title">折叠标题</view> <view slot="content">折叠内容...</view> </uni-collapse> </view> ``` 2. 然后，在对应的视图模型（data）中设置`isExpanded`控制折叠状态： ```javascript export default { data() { return { isExpanded: false, // 初始折叠状态，默认为关闭 }; }, // ... } ``` 3. 这样，当你运行应用时，折叠面板就不会显示箭头了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值