【QA】[Vue/复选框全选] v-model绑定每一项的赋初值问题

news2024/9/25 11:16:25

发生场景:不只是复选框的状态改变,还有的功能要用到复选框的选中状态,比如:购物车计算总价,合计等等。
引入:复选框 checkbox 在使用时,需要用v-model绑定布尔值,来获取选中状态;而在实现全选功能时,需要给列表项的每一项都绑定布尔值,但不能绑定同一个,往往都是以 v-model="item.smallCheck"这种形式,item 表示外层 v-for 循环的列表的每一项。
描述:如果还要利用选中状态来实现某个功能,就可能会出现这样的问题:复选框的初始值是 undefined
功能就无法实现,比如下面这个计算总价:

   // 计算总价
   TotalPrice: function () {
     // console.log(this.isCheck)
     let sum = 0;
     this.bookList.map(item=>{
       console.log(item.smallCheck)
       if(item.smallCheck){
         sum+=item.price*item.num
       }
     })
     return sum.toFixed(2);
   }

我利用选中状态来判断是否计算当前商品的总价,然而此时是 undefined,如果用:

if(item.smallCheck === true || item.smallCheck === undefined)

也是不行的,因为:
在这里插入图片描述
解决:在data中的列表加上一项为 smallCheck:false,而不是直接在 data 中加,因为循环绑定的是每一项而不是一个。

<input type="checkbox" v-model="item.smallCheck">

:v-model 绑定的数据是 undefined 的时候,不会报错,所以,一定要注意,v-model 不能是 undefined ,否则有些莫名其妙的问题。

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

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

相关文章

一台电脑安装26个操作系统(windows,macos,linux,chromeOS,Android,静待HarmonyOS)

首先看看安装了哪些操作系统1-4: windows系统 四个5.Ubuntu6.deepin7.UOS家庭版8.fydeOS9.macOS10.银河麒麟11.红旗OS12.openSUSE Leap13.openAnolis14.openEuler(未安装桌面UI)15.中标麒麟&#xff08;NeoKylin&#xff09;16.centos17.debian Edu18.fedora19.oraclelinux(特别…

Rust Web入门(一):TCP 和 HTTP Server

本教程笔记来自 杨旭老师的 rust web 全栈教程&#xff0c;链接如下&#xff1a; https://www.bilibili.com/video/BV1RP4y1G7KF?p1&vd_source8595fbbf160cc11a0cc07cadacf22951 学习 Rust Web 需要学习 rust 的前置知识可以学习杨旭老师的另一门教程 https://www.bili…

【原创】java+swing+mysql图书管理系统设计与实现

图书管理系统是一个比较常见的系统&#xff0c;今天我们主要介绍如何使用javaswiingmysql去开发一个cs架构的图书管理系统&#xff0c;方便学生进行图书借阅。 功能分析&#xff1a; 宿舍报修管理系统的使用角色&#xff0c;一般分为管理员和学生&#xff0c;管理员主要进行学…

学习OpenGL图形2D/3D编程

环境&#xff1a;WindowsVisual Studio 2019最流行的几个库&#xff1a;GLUT&#xff0c;SDL&#xff0c;SFML和GLFWGLFWGLAD库查看显卡OPENGL支持情况VS2019glfwgladopenGL3.3顶点着色器片段着色器VAO-VBO-(EBO)->渲染VAO-VBO-EBO->texture纹理矩阵matrix对图形transfor…

jmx prometheus引起的一次cpu飙高

用户接入了jmx agent进行prometheus监控后&#xff0c;在某个时间点出现cpu飙高 排查思路&#xff1a; 1、top&#xff0c;找到java进程ID 2、top -Hp 进程ID&#xff0c;找到java进程下占用高CPU的线程ID 3、jstack 进程ID&#xff0c;找到那个高CPU的线程ID的堆栈。 4、分析堆…

jenkins基础部署

一、jenkins是什么1.Jenkins的前身是Hudson&#xff0c;采用JAVA编写的持续集成开源工具。Hudson由Sun公司在2004年启动&#xff0c;第一个版本于2005年在java.net发布。2007年开始Hudson逐渐取代CruiseControl和其他的开源构建工具的江湖地位。在2008年的JavaOne大会上在开发者…

【Vue3源码】第二章 effect功能的完善下

【Vue3源码】第二章 effect功能的完善下 前言 上一章节我们实现了effect函数的runner 和 scheduler&#xff0c;这一章我们继续完善effect函数的功能&#xff0c;stop和onstop。 1、实现effect的stop功能 顾名思义&#xff0c;stop就是让effect停下来的函数。那么怎么才能让…

系统分享|分享几个Windows系统镜像下载网站

&#x1f4e3;今日作品&#xff1a;如何关闭Microsoft start方法介绍&#x1f466;创作者&#xff1a;Jum朱⏰预计花费&#xff1a;10分钟&#x1f4d6;个人主页&#xff1a;Jum朱博客的个人主页系统之家传送门&#xff1a;https://www.xitongzhijia.net/这个是老牌一直还在运营…

聊聊RocketMQ 的功能特性

这是RocketMQ的第三篇文章&#xff0c;前两篇文章我们说了一下rocketmq的入门安装和开发配置&#xff0c;以及他的一些名词解释&#xff0c;RocketMQ入门第一次&#xff0c;RocketMQ&#xff08;二&#xff09; 领域名词。今天我们来说说的他的一些功能特性。明确区分这些功能特…

[AI生成图片] 效果最好的Midjourney 的介绍和使用

Midjourney介绍&#xff1a; 是一个文本生成图片的扩散模型&#xff0c;能够根据输入的任何文本生成令人难以置信的图像&#xff0c;让数十亿人在几秒钟内创造惊人的艺术。为方便用户控制和快速生成图片&#xff0c;打开后在页面底部输入文本内容&#xff0c;稍等一小会&#…

基于easyexcel的MySQL百万级别数据的excel导出功能

前言最近我做过一个MySQL百万级别数据的excel导出功能&#xff0c;已经正常上线使用了。这个功能挺有意思的&#xff0c;里面需要注意的细节还真不少&#xff0c;现在拿出来跟大家分享一下&#xff0c;希望对你会有所帮助。原始需求&#xff1a;用户在UI界面上点击全部导出按钮…

全网多种方式解决The requested resource [/] is not available的错误

文章目录1. 复现错误2. 分析错误3. 解决错误3.1 本地项目3.2 线上项目4. 此错误的其他解决方法5. 补充说明1. 复现错误 曾记得&#xff0c;当初使用idea来写Java web项目时&#xff0c;常常因为Tomcat配置导致如下错误&#xff1a; 即The requested resource [/] is not avail…

自动化完成1000个用户的登录并获取token并生成tokens.txt文件

自动化完成1000个用户的登录并获取token并生成tokens.txt文件 写作背景 在我学习使用redis实现秒杀功能的过程中&#xff0c;在编写完秒杀代码后&#xff0c;需要使用Jmeter实际测试1000个用户进行秒杀&#xff0c;由于秒杀功能需要在用户登录完成后才能实现&#xff0c;用户是…

DFS深度优先搜索—Java版

递归三要素 递归的定义 递归的拆解 递归的出口 什么时候使用DFS&#xff1f; 深度回溯问题&#xff08;DFS与回溯区别不大&#xff09; 二叉树问题 组合、排列问题 找方案问题&#xff08;解空间是一棵树或者图&#xff0c;需要自行构造图/树&#xff09; 图的搜索问题…

Smokeping的主从模式部署

Smokeping 支持 Standalone&#xff08;单机&#xff09;模式和 Master/Slave&#xff08;主从&#xff09;模式。 之前老苏折腾过单机模式&#xff0c;这次应网友 Roxmie 的要求&#xff0c;研究了一下主从模式的部署 文章传送门&#xff1a; 网络性能监控工具Smokeping 因为…

Go基础-环境安装

文章目录1 Go?Golang?2 下载Go3 windows安装4 测试是否成功1 Go?Golang? Go也称为Golang&#xff0c;是Google开发的一个开源的编译型的静态语言。 Golang的主要关注点是高可用、高并发和高扩展性&#xff0c;Go语言定位是系统级编程语言&#xff0c;对web程序具有很好的支…

SAP数据导入工具(LSMW) 超级详细教程(批量导入内部订单)

目录 第一步&#xff1a;记录批导步骤编辑数据源对应字段 第二步&#xff1a;维护数据源 第三步&#xff1a;维护数据源对应字段&#xff08;重要&#xff09; 第四步&#xff1a;维护数据源关系。 第五步&#xff1a;维护数据源与导入字段的对应关系。 第六步&#xff0…

K_A12_006 基于STM32等单片机驱动BH1750模块 串口与OLED0.96双显示

K_A12_006 基于STM32等单片机驱动BH1750模块 串口与OLED0.96双显示一、资源说明二、基本参数参数引脚说明三、驱动说明时序对应程序:四、部分代码说明1、接线引脚定义1.1、STC89C52RCBH1750模块1.2、STM32F103C8T6BH1750模块五、基础知识学习与相关资料下载六、视频效果展示与程…

《蓝桥杯每日一题》递归·AcWing 1497. 树的遍历

1.题目描述一个二叉树&#xff0c;树中每个节点的权值互不相同。现在给出它的后序遍历和中序遍历&#xff0c;请你输出它的层序遍历。输入格式第一行包含整数 N&#xff0c;表示二叉树的节点数。第二行包含 N个整数&#xff0c;表示二叉树的后序遍历。第三行包含 N 个整数&…

设计模式之迭代器模式与命令模式详解和应用

目录1 迭代器模式1.1 目标1.2 内容定位1.3 迭代器模式1.4 迭代器模式的应用场景1.5 手写字定义的送代器1.6 迭代器模式在源码中的体现1.7 迭代器模式的优缺点2 命令模式2.1 定义2.2 命令模式的应用场景2.3 命令模式在业务场景中的应用2.4 命令模式在源码中的体现2.5 命令模式的…