小程序多选框问题

news2025/2/22 13:39:16

项目场景:

提示:这里简述项目相关背景:

例如:前端小程序记录错误bug


问题描述

提示:这里描述项目中遇到的问题:

例如:前端循环数组时页面数据无法显示

<checkbox-group bindchange="checkboxChange">
          <label style="display: flex;" class="weui-cell weui-check__label" wx:for="{{itemTwo}}" wx:key="{{item.ss}}">
            <view class="weui-cell__hd">
              <checkbox value="{{item.value}}" checked="{{item.checked}}"/>
            </view>
            <view class="weui-cell__bd">{{item.courseName}}</view>
          </label>
        </checkbox-group> 

js页面

    items: [],
    selectStageId: "",
    itemTwo: [],

原因分析:

提示:这里填写问题的分析:

例如:{{itemTwo}}对应的是js里面定义的数组里面的值,并且页面拿的是{{itemTwo}} 里面赋值之前的值,所以是个空。
而且wx:key=“{{item.ss}}” 不能随意定义名字,页面上的字显示不出来。而且也勾选不中,
在这里插入图片描述

解决方案:

提示:这里填写该问题的具体解决方案:

例如:这里是选中状态的正确方案,
//其中this.data是用来获取页面data对象的
//this.setData是用来更新界面的,就是页面渲染时要用这个赋值
//页面值必须为{{value}},js定义值必须为{{value}}

js页面:

data:{
 selectStageId: "",
}

//复选框选中
checkboxChange(e){
  console.log('checkbox发生change事件,携带value值为:', e.detail.value)
  const items = this.data.itemTwo
  const values = e.detail.value
  for (let i = 0, lenI = items.length; i < lenI; ++i) {
    items[i].checked = false
    for (let j = 0, lenJ = values.length; j < lenJ; ++j) {
      //循环6次,传来的值若与Item里面的值相等,则状态为true,则停止循环
      //只是获得了选中状态为true的值,页面值必须为{{value}},js定义值必须为{{value}}
      if (items[i].value === values[j]) {
         items[i].checked = true
        break
      }
    }
  }
  var selectStageIdTemp = "";
  for (let i = 0, lenI = items.length; i < lenI; ++i) {
    if(items[i].checked == true){
      selectStageIdTemp = selectStageIdTemp + items[i].id + ",";
    }
 }
  // this.setData({
  //   selectStageId: selectStageIdTemp
  // })
  //console.log(this.data.items);
  this.setData({
    itemTwo:items 
  })
  
  this.setData({
    'teacherInfo.selectStageId': selectStageIdTemp
  })
},

wxml页面:

  <checkbox-group bindchange="checkboxChange">
          <label style="display: flex;" class="weui-cell weui-check__label" wx:for="{{itemTwo}}" wx:key="{{item.value}}">
            <view class="weui-cell__hd">
              <checkbox value="{{item.value}}" checked="{{item.checked}}"/>
            </view>
            <view class="weui-cell__bd">{{item.courseName}}</view>
          </label>
        </checkbox-group>  

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

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

相关文章

【greenplum 性能优化】greenplum 数据库集群 如何释放占用内存

无意中发现了一个巨牛的人工智能教程&#xff0c;忍不住分享一下给大家。教程不仅是零基础&#xff0c;通俗易懂&#xff0c;而且非常风趣幽默&#xff0c;像看小说一样&#xff01;觉得太牛了&#xff0c;所以分享给大家。点这里可以跳转到教程。人工智能教程 在Greenplum数据…

想从事UE4开发相关工作,C++学到什么程度可以开始学习针对虚幻4的编程开发呢?

想从事UE4开发相关工作&#xff0c;C学到什么程度可以开始学习针对虚幻4的编程开发呢&#xff1f; 想从事UE4开发相关工作&#xff0c;C是一个必须要熟练掌握的语言。在学习C过程中&#xff0c;需要掌握语法、面向对象编程、数据结构和算法等内容&#xff0c;这些都是开发UE4所…

nginx修改配置文件不生效

1、问题描述 由于需要向其他公司的数据库中推送数据&#xff0c;但是对方公司的服务器只针对某一台服务器开放了端口&#xff0c;公司的datax部署在另外一台服务器中&#xff0c;导致不能正常连接数据库。因此做了nginx&#xff0c;进行两次代理&#xff0c;但是对方服务器突然…

企业——配置两条静态路由

要求1&#xff1a;按照图中要求配置IP地址&#xff0c;使用静态路由实现要求1、2 要求2&#xff1a;pc1访问pc2走下面 要求3&#xff1a;pc2访问pc1走上面&#xff0c;且两条线路互为备份 1.配置接口IP int g0/0/~ ip address ~ 2.配置静态路由&#xff0c;每个路由两条&a…

Vue3优雅地监听localStorage变化

目录 &#x1f4a1;前言 &#x1f4a1; 为什么要这样做&#xff1f; &#x1f48e; 思路 &#x1f48e; 实现 &#x1f697; 实现中介者模式 &#x1f697; 重写localStorage &#x1f697; 实现useStorage hook &#x1f48e; 测试 &#x1f697; 使用localStorage …

「大模型微调」使用 DDP 实现程序单机多卡并行指南

最近在大趋势的影响下&#xff0c;开始染指大模型。由于实验室计算资源的限制&#xff0c;需要使用单机多卡并行的方式运行程序&#xff0c;这里以 BLOOM-560m 模型为例&#xff0c;演示如何通过单机多卡DDP并行的方式微调完成下游任务。 目录 0. 基础篇- 两种分布式训练方式- …

网络安全自学笔记

一、怎么入门&#xff1f; 这个 Web 安全学习路线&#xff0c;整体大概半年左右&#xff0c;具体视每个人的情况而定。 &#xff08;上传一直很模糊&#xff0c;所以就没有展开了&#xff0c;需要高清版的可以在下面领取&#xff09; &#x1f449; 【一学习路线高清版一】&a…

Java操作mongodb(含分页,精确查询,模糊查询,时间区间,排序)进行查询

mongodb是常用的非关系型数据库&#xff0c;他经常用来存储文本数据&#xff0c;也就是JSON格式的数据。 不废话&#xff0c;直接上代码。注释写的很详细。&#xff08;有问题留言秒回&#xff09; public Page<Product> listProducts(ProductCond cond) {//如前端没传&a…

赛效:如何自动拼图在线实现多图合一

1&#xff1a;在电脑上打开改图鸭网页版&#xff0c;登录账号后在特色功能里点击“模板拼图”。 2&#xff1a;根据需要图片数量和特点选择对应的拼图模板&#xff0c;然后点击右侧模板里的上传图片。 3&#xff1a;图片添加完成后&#xff0c;除了可以直接在模板里拖动图片进行…

第六章 Electron|Node 实现license激活机制

一、license是什么 ✨ ⭐️ &#x1f31f; license许可证&#xff0c;一般用于软件的授权&#xff0c;我个人的理解就和我们平时的登录差不多。只是说登录时需要我们输入用户名和密码&#xff0c;license一般是开发方提供给你一串加密后的文本&#xff0c;通过这个文本进行一…

Linux5.1 LVS负载均衡群集

文章目录 计算机系统5G云计算第一章 LINUX LVS负载均衡群集一、LVS概述1.群集的含义2.群集的特点3.扩展服务器的方式4.群集的类型5.负载均衡的结构6.负载均衡集群工作模式分析 二、LVS-NAT 的部署1.关于 LVS 虚拟服务器2.LVS的负载调度算法3.使用 ipvsadm 工具 三、NAT模式 LVS…

ChatGPT助力码上行动:零基础学会Python编程

摘要&#xff1a; Python编程作为一种简洁、易学且功能强大的编程语言&#xff0c;正逐渐成为初学者进入编程领域的首选。然而&#xff0c;对于零基础的学习者来说&#xff0c;学习编程仍然存在一定的挑战。本文将介绍如何利用ChatGPT的强大语言生成能力&#xff0c;助力零基础…

元宇宙应用领域-社交

社交是一个古老的话题&#xff0c;人类从最开始的结群&#xff0c;到后来的部落&#xff0c;再到如今的网络社交&#xff0c;可以说人类的社交方式经历了漫长的演化过程。 随着互联网的普及和网络社交方式的不断发展&#xff0c;社交对于人类而言越来越重要。人们在网上不仅可…

SQL语句之DQL语言(二)(多表查询)

准备工作&#xff1a;创建表&#xff0c;添加数据 -- 部门管理 create table tb_dept(id int unsigned primary key auto_increment comment 主键ID,name varchar(10) not null unique comment 部门名称,create_time datetime not null comment 创建时间,update_time datetime…

新招了个从腾讯拿38K离职的测试大佬,让我见识到了什么才是测试界的天花板

现在招个会几年工作经验还会自动化测试的测试工程师真是难呀&#xff0c;10个里面有8个写了会自动化&#xff0c;但一问就是三不知 5年测试工作经验&#xff0c;技术应该是能达到资深测试的水准&#xff0c;即不仅能熟练地开发业务&#xff0c;而且还能熟悉项目的开发&#xff…

【数据结构每日一题】栈——中心对称链

[数据结构习题]栈——中心对称链 &#x1f449;知识点导航&#x1f48e;&#xff1a;【数据结构】栈和队列 &#x1f449;[王道数据结构]习题导航&#x1f48e;&#xff1a; p a g e 70.4 page70.4 page70.4 本节为栈和链表综合练习题 题目描述&#xff1a; &#x1f387;思路…

【论文阅读】dreambooth

简介 目标&#xff1a;subject-driven generation&#xff0c;针对特定物体的图像生成&#xff0c;仅使用少量目标主体图像&#xff0c;dreambooth可以在prompt的指导下生成大量目标主体在不同场景下的图像。例如下图中小狗&#xff0c;我们给定的set就是左侧的input images&a…

Matplotlib - 绘制 高亮显示的饼图 (Highlight Pie Chart) 函数源码

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://blog.csdn.net/caroline_wendy/article/details/131089501 饼图 (Pie Chart) 是一种圆形统计图&#xff0c;被分割成片用于表示数值间的比例关系。每个切片的弧长以及相应的中心角和面积…

【QQ聊天界面-创建自定义Cell Objective-C语言】

一、我们刚才说到这个地方,我们说,用系统的单元格,是不是不够用吧, 1.那么这个时候,我们就要、需要自定义单元格 自定义单元格,我们就新建一个类,继承自UITableViewCell 来,写一下, 那么,这个时候,应该在哪个文件夹下,去新建类啊, 是不是在Views下面吧, 因为…

一文详解!Robot Framework Selenium UI自动化测试入门篇

目录 前言&#xff1a; 自动化框架的选择 测试环境的搭建 导入Selenium2Library包 关键字是什么&#xff1f; 创建测试用例 前言&#xff1a; 自动化测试的重要性越来越受到人们的重视&#xff0c;因为它可以提高测试效率、降低测试成本并减少人为错误的出现。为了满足这…