从底部弹起的滚动选择器。支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器。
那么uniapp picker组件绑定的是对象数组应该怎么处理?网上有很多教程,但是很多都写错了,下面分几点讲清楚。
先给出详细代码:
<picker @change="shipTypeChange" :value="index" :range="shiptypes" :range-key="'title'">
<view class="uni-input">{{shiptypetitle}}</view>
</picker>
1.shiptypes数组对象类似下面格式:
[{id: 1, title: "邮轮", value: 1, cid: 1}]
2.想要显示title的值应该如何设置?
设置pick属性:range-key=”‘title'”,只要双引号里有单引号‘title’
3.显示代码要注意应该如下:
<view class="uni-input">这里是选中后的显示的值,可以shipTypeChange方法里,自己设置</view>
网上很多代码是这样的{{shiptypes[index].title}} 是会报错的 ,会让人误解是循环出来的值
相关JS代码(VUE3)
let shiptypetitle = ref('');
//选择船舶类型
let shipTypeChange = (v) => {
shiptypetitle.value = shiptypes.value[v.detail.value].title;
}
RoveCoder版权所有,转载请注明