解决微信小程序动态生成表单情况下,遍历picker,并无法修改列表里面下标key的解决访方案

需求描述:

通过请求后端接口,动态获取表单的数据源(json格式,数组),使用小程序wx:for循环遍历,对接口返回的数组中的一个字段存为picker组件选择器,并允许用户进行选择修改该值。

问题描述:
在使用wx:for循环时,picker选择器修改值操作如果直接使用this.setData({index:e.detail.value})的方式进行修改保存,使用这种方式就会出现picker选择器渲染完毕后,对其中的某个选择器的值进行修改,相对应的,所有使用wx:for循环遍历出的picker选择器的值均会修改(原因:picker选择器共用value所影响)

解决方案:
对后台返回的数据进行处理,在后台返回的数组中每一项添加当前picker选择器修改后的值,picker选择器选项字段,在循环所有picker选择器时,通过给picker选择器绑定不同的索引,通过索引去监听哪个picker选择器的值进行改变,进行改变后的picker选择器记录对应改变的值后,重新赋值即解决动态生成picker选择器后修改值相互影响问题。

注:如果是下拉框的情况下,后台返回的数据请用一个固定的键来保存下拉框的里面的json数组,比如selectList

wxml文件

<!-- wxml -->
<form bindsubmit="formSubmit"><view wx:for='{{formTemplate}}' wx:key='{{indx}}' wx:for-index="idx"><view ><view><text>状态类型:</text></view><view><picker bindchange="bindPickerChange" data-index='{{idx}}'  range="{{item.array}}"><input placeholder='请选择' disabled value='{{item.value}}'></input></picker></view></view></view><view class="bottombtn"><button class="bluebtn" form-type="submit" >提交保存</button></view>
</form>

{{formTemplate}}是后台接口返回的模板列表对象

{{item.value}} 是列表对象里面虚拟出来的一个字段,你可以自己随便定义,所以默认肯定为空

js文件:

//下拉框切换事件bindPickerChange(e) {let value = e.detail.value;let index = e.currentTarget.dataset.index;this.setData({['formTemplate['+index+'].fieldValue']:this.data.formTemplate[index].selectList[value]})},
/*** 切换时间选择框* @param {*} e */bindDateChange: function (e) {let value = e.detail.value;let index = e.currentTarget.dataset.index;this.setData({['formTemplate['+index+'].fieldValue']:value})},

其他比如时间选择器同理都可以按这个方式动态修改

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL表空间

MySQL表空间 文章目录 MySQL表空间1. MySQL中的表1.1 IOT表1.2 InnoDB逻辑存储结构2. 独立表空间2.1 段 segment2.1.1 段的概念2.1.2 段的分类2.1.2.1 叶子节点段主要结构2.1.2.2 非叶子节点段2.1.3 碎片区2.2 区2.2.1 区的概念2.2.2 区的结构2.2.2.1 XDES Entry结构2.3 页2.3.…

tpwe兼容微擎小程序前端请求写法

当使用TPWe兼容微擎小程序前端时&#xff0c;可以按照以下方式编写前端请求&#xff1a; 修改siteinfo.js下面的配置文件。 var e {uniacid: "10001",acid: "10001",multiid: "0",version: "1.0",siteroot: "https://域名/inde…

基于51单片机的称重电子秤proteus仿真设计

一、设计背景 随着微电子技术的应用,市场上使用的传统称重工具已经满足不了人们的要求。为了改变传统称重工具在使用上存在的问题&#xff0c;在本设计中将智能化、自动化、人性化用在了电子秤重的控制系统中。本系统主要由单片机来控制&#xff0c;测量物体重量部分使用称重传…

springCloud bean的加载流程

Spring Cloud是Spring的一个子项目&#xff0c;用于构建基于Spring Boot的分布式系统。在Spring Cloud中&#xff0c;Bean的加载过程与Spring框架的Bean加载过程相似&#xff0c;主要包括以下几个步骤&#xff1a; 1、读取配置文件&#xff1a;Spring Cloud从配置文件中加载Be…

Activiti7工作流引擎:在线流程编辑器Activiti Modoler5.x

一&#xff1a;简介 有的时候我们的流程图需要业务人员自己绘制&#xff0c;然后使用自己绘制的流程图&#xff0c;此时就需要一个在线流程图编辑器需要集成到我们的web系统中。Activiti Modoler是Activiti官方推出的在线流程编辑器。 二&#xff1a;pom.xml <dependency…

飞书公式总结

文本处理函数 飞书中的表格&#xff0c;需要实现 内容内容1条件1内容2条件2内容3条件3今天是周一;可以出去玩今天是周一能今天天气不错不能可以出去玩能 条件1&#xff0c;2&#xff0c;3为能时&#xff0c;把对应的内容1&#xff0c;内容2&#xff0c;内容3复制到内容 TEX…

Golang项目实战(三)

Golang项目实战&#xff08;三&#xff09; 该项目是使用grpcgin来构建的一个电商微服务项目&#xff0c;使用consul来注册和发现微服务。 项目简介创建项目架构创建货币服务创建货币微服务处理器将货币微服务注册到consul下载安装consul并发布服务创建商品微服务准备商品数据…

HNU小学期工训-STC15单片机模型大作业实验报告

STC15单片机模型大作业实验报告 全称&#xff1a;基于STC15单片机与OLED显示模块&PC端演示的多功能声光温振时钟智能手表模型 计科210X 甘晴void 202108010XXX 【请注意&#xff1a;本作业入选优秀范例&#xff0c;直接照抄源码有很大风险】 【建议理解原理之后作改动】 …

基于SSM框架的德云社票务系统

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用Vue技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

C#之位运算

符号&#xff1a;<< >> & | ^ ~ 作用&#xff1a;用于二进制数据的操作 表达式&#xff1a; 表达式 运算符 表达式 ~表达式或者是变量 优先级&#xff1a;~高于<< , >> 高于 & 高于 | ^ 结合性&#xff1a;左结合 说明&#xff1…

2024届校招-Java开发笔试题-S4卷

有三种题型&#xff1a;单项选择题&#xff08;10道&#xff09;、不定项选择题&#xff08;10道&#xff09;、编程题&#xff08;3道&#xff09; 下面是一些回忆的题目&#xff1a; 1.哪种设计模式将对象的创建与使用分离&#xff0c;通过工厂类创建对象 答&#xff1a;工…

Linux入门教程||Linux系统目录结构

登录系统后&#xff0c;在当前命令窗口下输入命令&#xff1a; ls / 你会看到如下图所示: 树状目录结构&#xff1a; 以下是对这些目录的解释&#xff1a; /bin&#xff1a; bin是Binary的缩写, 这个目录存放着最经常使用的命令。 /boot&#xff1a; 这里存放的是启动Linux时…

RP9学习-1

一.基础 1.10个面板位置示意图&#xff1a; 2.常用英文 1.鼠标点击&#xff1a;click or tap 3.工作区 1.恢复默认工作区&#xff1a; view-->reset view 2.自定义工作区&#xff1a; 可以用鼠标左键拖动面板到独立的位置或者吸附到其他面板上 3.自定义工具栏 view-->T…

优漫动游 常见的AI视频生成网站的官方网站:

1、Lumen5 Lumen5是一款在线视频制作工具&#xff0c;利用人工智能技术能够迅速将文本、和音乐转换为视频。它可以帮助你把博客文章、社交媒体内容等转化为吸引人的视频&#xff0c;从而提高你的品牌曝光率和社交媒体的参与度。 2.Animoto Animoto是一个视频制作平台&…

使用element-ui导航,进入对应的三级页面菜单保持点击状态

1.注意事项 01.路由中使用了keepAlive属性&#xff0c;要用keepAlive&#xff1a;true&#xff0c;不能等于false&#xff0c;使用false页面会刷新 2.使用的方法 NavMenu 导航菜单 3.项目实例 <template><div class"policy-home"><div class"…

【Linux】工具Gdb调试轻度使用(C++)

目录 一、Gdb背景 二、Gdb基本命令 【2.1】list | l 【2.2】break | b 【2.5】delete | d 【2.6】disable 【2.7】enable 【2.3】info 【2.4】info locals 【2.6】run | r 【2.7】next | n 【2.8】step | s 【2.9】 continue | c 【2.10】bt 【2.11】finish 三…

docker镜像详解

目录 什么是docker镜像镜像相关命令docker pulldocker imagesdocker searchdocker rmi导出 / 导入镜像 镜像分层镜像摘要镜像摘要的作用分发散列值 什么是docker镜像 Docker镜像是Docker容器的基础组件&#xff0c;它包含了运行一个应用程序所需的一切&#xff0c;包括代码、运…

sqli第一关

1.在下使用火狐访问sqlilabs靶场并使用burpsuite代理火狐。左为sqlilabs第一关&#xff0c;右为burpsuite。 2.输入?id1 and 11 与?id1 and 12试试 可以看出没有变化哈&#xff0c;明显我们输入的语句被过滤了。在?id1后面尝试各种字符&#xff0c;发现单引号 包…

ssh总是很短时间自动断开连接

ssh断开连接 有时候使用ssh连接服务器&#xff0c;只是一会儿没用就自动断开连接了&#xff0c;又得重新连&#xff0c;很烦人&#xff0c;那么有没有办法可以让连接保持很久不断开呢&#xff1f;那肯定是有的 在/etc/ssh目录下的sshd_config就是用来配置ssh的&#xff0c;其对…

SpringAOP的使用总结

B站 【尚硅谷新版SSM框架全套视频教程&#xff0c;Spring6SpringBoot3最新SSM企业级开发】https://www.bilibili.com/video/BV1AP411s7D7?p47&vd_source726decf3eb63273901caae35ad437124 AOP即面向切面编程,通过使用一定的技术将非核心方法抽离出来,放入统一的类中进行…