uniapp 微信小程序 Picker下拉列表数据回显问题

效果图:
在这里插入图片描述

1、template

<template>
	<view class="items select-box">
		<view class="items-text">品牌型号</view>
		<picker @change="bindBrandType" :value="brandIndex" :range="brandList" range-key="dictLabel"
			class="picker-box">
			<input class="select-input" type="text" placeholder="请选择品牌型号" v-if="brandIndex == -1"
				disabled="disabled"></input>
			<view v-else class="select-input" :value="brandList[brandIndex].dictLabel">
				{{brandList[brandIndex].dictLabel}}
			</view>
		</picker>
		<!-- 下拉角标图片 -->
		<view class="icon-img">
			<image src="../../static/img/select-icon.png"></image>
		</view>
	</view>
</template>

2、data

data() {
	return {
		//为效果展示,暂且brandList 的数据在data内写死
		brandList: [
			{
				"dictLabel": "沃尔沃",
				"dictValue": "1"
			}, {
				"dictLabel": "东风",
				"dictValue": "2"
			}, {
				"dictLabel": "红旗",
				"dictValue": "3"
			}, {
				"dictLabel": "解放",
				"dictValue": "4"
			}, {
				"dictLabel": "宝马",
				"dictValue": "5"
			}, {
				"dictLabel": "奥迪",
				"dictValue": "6"
			}, {
				"dictLabel": "哈弗",
				"dictValue": "7"
			}
		],
		brandIndex: -1,
		brandIds: '',
		brandame: '',
	}
}
onLoad: function(options) {
	this.getBrandList()//通过接口获取品牌列表数据
}

3、methods

//获取品牌型号列表
getBrandList: function() {
	uni.showLoading();
	var params = {
		url: "/***/***",
		method: "GET",
		data: {},
		callBack: res => {
			uni.hideLoading()
			this.brandList = res.data
			//为效果展示,暂且brandList 的数据在data内写死,项目中按接口返回的数据
		}
	};
	http.request(params);
},
//选择品牌型号
bindBrandType(e) {
	this.brandIndex = e.detail.value
	//往后端传值传所选的brandIds 
	this.brandIds = this.brandList[this.brandIndex].dictValue
	this.brandame  = this.brandList[this.brandIndex].dictLabel
},
//接口返回数据,数据回显
getInfo: function() {
	uni.showLoading();
		var params = {
			url: "/***/***",
			method: "GET",
			data: {},
			callBack: res=> {
				uni.hideLoading()
				if(res.data){
					//返回的已选品牌id
					this.brandIds = res.data.brand
					//遍历品牌列表数据,对应id,从而对应选项
					this.brandList.forEach((item,bindex)=>{
						if(item.dictValue == res.data.brand){
							this.brandIndex = bindex;
						}
					})
				}
			}
		};
		http.request(params);
},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/43531.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

电脑新装系统优化,win10优化,win10美化

公司发了新的笔记本&#xff0c;分为几步做 1.系统优化,碍眼的关掉。防火墙关掉、页面美化 2.安装必备软件及驱动 3.数据迁移 4.开发环境配置 目录 目录复制 这里写目录标题 目录1.系统优化关掉底部菜单栏花里胡哨 2.安装必备软件及驱动新电脑安装360 1.系统优化 关掉底部菜单…

Git远程操作

Git远程操作 理解分布式版本控制系统什么是版本控制系统&#xff1f;常见的版本控制系统 远程仓库新建远程仓库克隆远程仓库git clone使⽤HTTPS⽅式使⽤SSH⽅式git remote 向远程仓库推送git push 拉取远程仓库git pull 配置Git忽略特殊⽂件git check-ignore给命令配置别名 理解…

【软件测试】如何选择回归用例

目录 如何在原始用例集中挑选测试用例 具体实践 总结 本文讨论一下在回归测试活动中&#xff0c;如何选择测试用例集。 回归测试用例集包括基本测试用例集&#xff08;原始用例&#xff09;迭代新增测试用例集&#xff08;修复故障引入的用例和新增功能引入的用例集&#xf…

SQL调优教程

SQL调优教程 基础方法论 任何计算机应用系统性能问题最终都可以归结为 1.cpu消耗 2.内存使用 3.对磁盘&#xff0c;网络或其他I/O设备的输入/输出(I/O)操作 遇到性能问题时&#xff0c;要判断的第一点就是“在这三种资源中&#xff0c;是否有哪一种资源达到了有问题的程度”&…

质效两全:媒体服务的创新“顶设”

做媒体服务&#xff0c;一定要有刻入骨髓的抽象思维。 视频化浪潮汹涌、生成式人工智能AIGC极速迭代、体验需求和应用场景愈发多样......面对“视频生产力”的变革&#xff0c;我们能否透过纷繁复杂的表象&#xff0c;洞察音视频行业的“真正需求”&#xff1f; 是否存在一套…

【Python学习笔记】记载解决Python报错HTTP Error 403: Forbidden的一波三折过程

【Python学习笔记】记载解决Python报错HTTP Error 403: Forbidden的一波三折过程 当前进度&#xff1a;还没有解决&#xff0c;但是已经尝试了好几种办法&#xff0c;此处做个记录&#xff0c;也许能帮上忙。 本帖是整理回顾帖&#xff0c;不是教程帖&#xff0c;追求一个完美…

在 Windows 中通过 WSL 2 高效使用 Docker

大家好&#xff0c;我是比特桃。平时开发中&#xff0c;不免会使用一些容器来跑中间件。而开发者使用的操作系统&#xff0c;大多是Mac OS 、Windows。Docker 为了兼顾这两个平台的用户&#xff0c;推出了 Docker Desktop 应用。Docker Desktop 中的内核还是采用了 Linux 的内核…

智能合约安全审计

智能合约安全审计的意义 智能合约审计用于整个 DeFi 生态系统&#xff0c;通过对协议代码的深入审查&#xff0c;可以帮助解决识别错误、低效代码以及这些问题。智能合约具有不可篡改的特点&#xff0c;这使得审计成为任何区块链项目安全流程的关键部分。 代码审计对任何应用…

基于OpenCV的红绿灯识别

基于OpenCV的红绿灯识别 技术背景 为了实现轻舟航天机器人实现红绿灯的识别&#xff0c;决定采用传统算法OpenCV视觉技术。 技术介绍 航天机器人的红绿灯识别主要基于传统计算机视觉技术&#xff0c;利用OpenCV算法对视频流进行处理&#xff0c;以获取红绿灯的状态信息。具…

Qt5.14.2下载及安装

1. 下载 https://download.qt.io/archive/qt/5.14/5.14.2/ 由于Qt 自从5.15版本开始&#xff0c;对非商业版本&#xff08;也就是开源版本&#xff09;&#xff0c;不提供已经制作好的离线exe安装包。所以&#xff0c;对于5.15&#xff08;含&#xff09;之后的版本&#xff…

苹果账号被禁用怎么办

转载&#xff1a;苹果账号被禁用怎么办 目录 禁用的原因 解除Apple ID禁用 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UKQ1ILhC-1689932607373)(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw)]​编辑 …

MySQL的主从复制练习

基本原理图如下&#xff1a; 主从复制&#xff08;也称 AB 复制&#xff09;允许将来自一个MySQL数据库服务器&#xff08;主服务器&#xff09;的数据复制到一个或多个MySQL数据库服务器&#xff08;从服务器&#xff09;。当主库进行更新的时候&#xff0c;会自动将数据复制到…

从C到C++ | C++入门(三)

目录 内联函数 auto 关键字 范围for 指针空值nullptr 内联函数 以inline修饰的函数叫内联函数&#xff0c;编译时C编译器会在调用函数的地方展开&#xff0c;没有函数调用建立栈帧的开销&#xff0c;可提升程序的运行效率。 例子&#xff1a; #include <iostream> …

【C++修炼之路】内存管理

&#x1f451;作者主页&#xff1a;安 度 因 &#x1f3e0;学习社区&#xff1a;StackFrame &#x1f4d6;专栏链接&#xff1a;C修炼之路 文章目录 一、C/C 内存分布二、考题三、C语言动态内存管理方式四、C内存管理方式1、对内置类型2、对自定义类型 五、C对动态管理的升级六…

查找和二叉树(基础知识和基本操作)

查找&#xff1a; 1.二分查找&#xff1a;先定一个大范围&#xff0c;想一个数&#xff0c;看是在起始范围到中间范围还是中间范围到结束范围&#xff0c;依次循环直到确定值&#xff08;相当于一直把范围折半&#xff0c;直到找到&#xff09; while(low<high) {int mid(…

分布式光伏电站运维平台在石化行业的应用光伏发电数据实时监控

摘要&#xff1a;为实现绿色发展和“净零排放”的目标&#xff0c;近些年来国内外不少能源化工企业进入光伏发电领域。如何做好光伏电站的运行维护&#xff0c;成为石化企业不得不思考的重要课题。本文从分布式光伏电站消防安全、作业安全、环保管理等方面进行思考&#xff0c;…

为什么学习SpringSpring框架核心与设计思想(IOC与DI)?

博主简介&#xff1a;想进大厂的打工人博主主页&#xff1a;xyk:所属专栏: JavaEE进阶 目录 文章目录 一、Spring是什么&#xff1f; 二、为什么要学习框架&#xff1f; 三、Spring核心概念 3.1 什么是容器&#xff1f; 3.2 什么是IOC&#xff1f; 四、再谈Spring中的 IOC 五…

mac如何提取视频中的音频?

mac如何提取视频中的音频&#xff1f;我们经常在平时工作的时候&#xff0c;需要将一个视频里面的音频单独提取出来另做他用&#xff0c;例如很多视频自媒体博主就经常使用这种方法来储备音频素材&#xff0c;这个操作在Windows上面比较容易实现&#xff0c;毕竟有相当多的软件…

计算机网络微课堂学习笔记(详细图解讲解)-长期更新

前言&#xff1a; 计算机网络在信息时代的作用 计算机网络已由一种通信基础设施发展成为一种重要的信息服务基础设施&#xff0c;计算机网络已经像水、电、煤气这些基础设施一样&#xff0c;成为我们生活中不可或缺的一部分 一、因特网概述 &#xff08;1&#xff09;网络、…

黑马 pink h5+css3+移动端前端

网页概念 网页是网站的一页,网页有很多元素组成,包括视频图片文字视频链接等等,以.htm和.html后缀结尾,俗称html文件 HTML 超文本标记语言,描述网页语言,不是编程语言,是标记语言,有标签组成 超文本指的是不光文本,还有图片视频等等标签 常用浏览器 firefox google safari…