首页 > 前端 > 正文

从底部弹起的滚动选择器。支持五种选择器,通过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版权所有,转载请注明

猜你喜欢
picture loss