知识分类
后端
前端
设计
开源组件/产品
APP
其他
广告招募

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

管理员
发布于:2024-03-08 12:42:37

从底部弹起的滚动选择器。支持五种选择器,通过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;
	}
上一篇:decimal.js 数字加减乘除再用不用担心精度问题
下一篇:Layui 树形表格(treetable)常用的使用知识点
搜索内容
最新文章
  • 非可框架,Google Authen
  • 连接WIFI出现无Internet
  • 免费AI SEO工具,SEO的AI生
  • OBS在银河麒麟或ubuntu等核心
  • 常见主板开机进入bios热键,一张图
  • 微软常用运行库VC++合集下载,解决
  • MSYS2中安装使用GCC的正确方法
  • 用了这些网站,多出来的时间让你摸鱼
  • 优麒麟操作系统(麒麟系统社区版)安装
  • 推荐一个Vscode插件,让你写正则
精彩文章
  • 1 什么是PHP站群以及使用php开源框
  • 2 连接WIFI出现无Internet
  • 3 php将数字转成EXCEL列名,支持
  • 4 MSYS2中安装使用GCC的正确方法
  • 5 FrameCoder非可,基于web
  • 6 免费AI SEO工具,SEO的AI生
  • 7 常见主板开机进入bios热键,一张图
  • 8 PBOOTCMS安全加固方法解析与实
  • 9 Layui 怎么样更换主题颜色?
  • 10 小程序真机调试 报错 define
工信部备案:苏ICP备2023011827号-1
苏公网安备 32111202000338号