uniapp picker组件绑定的是对象数组应该怎么处理?

从底部弹起的滚动选择器。支持五种选择器，通过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;
	}

关键词： uniapp picker 组件 对象 数组