uni-app中picker组件的一个坑 ，在uniapp中，picker里range为对象数组，range-key也设置了， 还是无效

已于 2022-02-10 13:00:13 修改
阅读量1.2w 收藏 7
点赞数 11
分类专栏： 前端领域 文章标签： vue.js 前端 javascript
于 2020-04-28 19:24:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42981560/article/details/105821764
版权
在uni-app中，遇到picker组件range为对象数组且设置range-key无效的问题，表现为选项显示为[object Object]。解决方法是在range-key中添加单引号，使键名成为字符串，从而正确显示选项。
摘要由CSDN通过智能技术生成
了解本专栏 订阅专栏 解锁全文 超级会员免费看
前端技术栈
关注
专栏目录
订阅专栏
微信小程序uni-app：常用Form表单组件input、textarea、picker使用示例
彭世瑜的博客
12-07 1164
【代码】微信小程序uni-app：常用Form表单组件使用示例。
uniapp range-key 设置不生效
王元帅的博客
07-31 623
uniapp 中 picker 使用range-key
微信小程序picker选择器当range 是一个 Object Array 时怎么处理
qdtravelsky的博客
12-03 1201
微信小程序picker选择器当range 是一个 Object Array 时，不要怕，直接上示例代码： page.js中data中定义objectArray objectArray: [ { id: 0, name: '美国' }, { id: 1, name: '中国' }, { id: 2, name: '巴西' }, {
利用uniapp的picker封装预约时间的组件
最新发布
fangcaojushi的博客
10-07 699
(3).defineEmit返回一个触发器，用于触发事件，第一个参数是具体事件，第二个是传递的值。(1).defineEmits用于在setup中注册自定义事件，是一个宏函数，使用时无需导入。(2).defineEmits接受一个数组，元素为自定义事件名。defineProps先从vue中引入。
uni-app中picker组件的一个坑
热门推荐
weixin_30752699的博客
08-30 1万+
这里直接贴出代码 <view class="goods-info-add fl-sw"> <view>运费模板：</view> <view> <picker mode="selector" :value="index3" :range-key="Name...
uniapp picker踩坑range-key失效
Hero_rong的博客
08-27 2135
uniapp 里面是没有 select 下拉框的， 只有 picker （官方文档戳这里）， 这个是从屏幕下面弹出来的，官方文档说是可以设置数组和数组里面套对象，然后！！大家要记住，在 uniapp 里面，range前面要带冒号，而 range-key 就不用了，这里是个小坑 ...
小程序picker组件的range-key不生效
流水日常，不做大论
07-16 2601
小程序picker使用过程中发现按官方文档写完，提示列表内容为[Object Object]，先看文档： 如果使用对象数组，你需要设置range-key来设置显示该数组中的哪个value为列表显示内容，但是……问题出在哪…… 解决了： range-key里面的value要加单引号 &lt;picker bindchange="bindPickerChange" range-key="...
uniapp 微信小程序, keyName不合法导致丢失响应式的问题, 巨坑系列
taoyong920710的博客
09-18 220
我点击这个图片后, 将这个图片的值修改一下, 发现并没有什么卵用, 图片很正常, 在chrome里面可以正常运行. 在小程序中会丢失响应式.经过多次测试, 发现Object的KeyName不能使用"禁语", 小数点就是其中一个, 可能还有其他的字符在"禁语"之内, 没有仔细测试.最好的原则, 不要使用特殊符号。不要增加兼容性的风险， 万一又要打一个Android包或者ios包呢。本来以为只是图片才有这样的情况, 最后发现跟组件没什么关系.先来看看, 丢失响应式的情况是怎么样的.
uni-app - 改变数据后视图无更新变化（针对数组）解决方案（更改数据不刷新）
qq_32616119的博客
04-21 3215
if (pageNum == 1) { than.list = [res.data.data]; } else { than.$set(than.list, pageNum - 1, res.data.data); } 不要使用index，注意key的取值，需要唯一 不需要 this.$forceUpdate();
uni-app 内置组件 picker 二次封装
weixin_44446223的博客
03-22 445
<template> <picker class="constom-picker" ref="pickerRef" :mode="mode" :value="index" :range="range" :range-key="labelKey" @change="handleChange" > <view v-if="!pickerVa
uni-app日期选择组件-基于mx-datepicker修改
修车码农的博客
07-07 6020
首先非常感谢mx-datepicker作者,这个时间组件非常漂亮且好用。 由于我们的需求是，在一个可用的日期范围内选择一个日期，作者并没有支持这种场景，于是在作者的基础上进行了修改。 具体的需求如下： 可传入一个可选范围，打开选择器时，只有可选范围内的日期可点击选中，其他日期不可点击 动态改变翻月翻年按钮可用性，如果上月数据中没有可选日期则向上翻月按钮不可点击。 文末有完整代码 下面来说一下我的改造过程。 1.在props中增加一个参数，用于接收调用者传进来的可用日期范围enableRange,接.
【uni-app】picker普通选择器的用法
得意小门生的博客
07-29 7436
点击前： 点击后： <view class="item"> <view class="title">选择学员</view> <view class="line flex justify-between" style="width: 100%;"> <view class="desc"> {{checkStudents[studentIndex].name}} </view> <picker mode="s
uniapp的picker组件单列模式下range绑定对象数组的使用注意点
weixin_46061878的博客
01-17 2033
uniapp的picker单列用法和小坑
uniapp踩坑日志——picker组件改变选项不刷新数据
weixin_43826965的博客
06-02 3382
手机端运行picker组件 uniapp手机运行picker组件时，改变多列选择器的一项时，其他列无法更新。 解决方法：在数据变化时加入以下代码 this.$forceUpdate();
uview中 u-picker无法显示
初遇你时动了情
09-14 1657
【代码】uview中 u-picker无法显示。
uniapp picker 获取数组对象值
weixin_43886375的博客
12-22 1505
如果你picker选择遇到了后台给你对象数组的情况如何取值呢。:range-key="‘money’"必须要加单引号。如果不加上单引号会变成以下结果。
小程序 picker组件选中数据 无法显示
xx2410653967的博客
04-06 4103
若想获取到 picker组件里的值的话这样看是没有任何问题的 上代码： 那么问题来了： 注意：如果你是数组的话，选中数据但是无法显示选中的数据（一定得加objectArray） 然后。index 获取的是下标。我们要获取的是要显示的数据所以 这样就可以直接打印出来了 ...
【uniapp】picker选择器用法
每天进步一点点, 靠近小目标一点点~
03-03 8833
关于uniapp picker的使用~
uview 组件 使用 picker 组件 无法显示的问题
初遇你时动了情
04-28 4784
u-picker :show="labelShow" @close="close" ref="uPicker" @cancel="close" keyName="label_name" :columns="lableData1"> </u-picker> 其中lableData1格式 lableData1:[[{label_name:"labe名称",id:"154aer"}]] keyName显示名称 label_name。
uniapp uni-file-picker组件 只能有一个文件
11-20
根据提供的引用内容，无法确定您的问题的具体上下文。但是，根据您的问题，我可以回答您的问题。 uni-file-picker组件可以选择多个文件。只需将属性mode设置为"upload"，并将属性multiple设置为true即可。例如： ```html <uni-file-picker mode="upload" multiple></uni-file-picker> ```
评论 18
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端技术栈

支持鼓励

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值