Day16-购物车页面-商品列表修改购物车商品的勾选状态

news2024/10/6 12:25:20

提纲挈领:

我的操作:

1》当用户点击 radio 组件,希望修改当前商品的勾选状态,此时用户可以为 my-goods 组件绑定 @radio-change 事件,从而获取当前商品的 goods_id 和 goods_state

 定义 radioChangeHandler 事件处理函数如下:

 

2》 在 my-goods.vue 组件中,为 radio 组件绑定 @click 事件处理函数如下:

3》在 my-goods.vue 组件的 methods 节点中,定义 radioClickHandler 事件处理函数:

 

1》和2》和3》的效果图:

 

 

*************************************************************************************************************

2.拿到了商品的最新的状态并没有把这个状态更新到vuex里面。更新购物车里面的商品状态。

我的操作:

1》在 store/cart.js 模块中,声明如下的 mutations 方法,用来修改对应商品的勾选状态:

 

 2》在 cart.vue 页面中,导入 mapMutations 这个辅助函数,从而将需要的 mutations 方法映射到当前页面中使用:

1>引入mapMutations辅助函数

 2>

 

1》和2》的效果图:

 

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

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

相关文章

达梦数据库备份策略

文章目录一、达梦数据库备份策略1.1 开启归档模式1.1.1 联机配置本地归档1.1.2 脱机配置本地归档1.2 启动DMAP服务1.2.1 启动DMAP1.3 物理备份1.3.1 联机备份(1) 数据库备份(2) 表空间备份(3) 表备份(4) 备份归档1.3.2 脱机备份(1) 启动DMRMAN(2) 备份数据库1.4 物理备份还原1.…

【Linux】命令

常用命令 帮助&#xff08;Manual Pages&#xff0c;Manual&#xff1a;手册&#xff0c;特指参考文件&#xff09; man man <command_name> 打开目录&#xff08;change directory&#xff09; cd /etc/ cd /home 查看当前所在目录 pwd 创建一个名为 file 的文件&…

pip 安装 livetest 失败

pip 安装 livetest 失败1. 现象2. 解决方案(1) 下载(2) 移动并解压(3) 修改文件1) livetest-0.5/livetest/__init__.py2) livetest-0.5/setup.py3) livetest-0.5/test/test_select.py(4) 运行安装4. 验证1. 现象 pip 安装 livetest 失败 2. 解决方案 (1) 下载 官网下载 liv…

美国硅基和宽禁带半导体供应链竞争力剖析

&#x1f446;扫描上方二维码&#xff0c;报名参与研讨会直播&#xff0c;福利多多~ 前言 本文概述了半导体供应链&#xff0c;包括传统半导体&#xff08;即硅基&#xff09;和 宽禁带&#xff08;WBG&#xff0c;Wide Bandgap&#xff09; 半导体&#xff0c;并深入探讨了宽禁…

[附源码]JAVA毕业设计高校医务管理系统(系统+LW)

[附源码]JAVA毕业设计高校医务管理系统&#xff08;系统LW&#xff09; 目运行 环境项配置&#xff1a; Jdk1.8 Tomcat8.5 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术…

[附源码]Python计算机毕业设计Django动物保护协会网站

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…

[激光原理与应用-26]:《激光原理与技术》-12- 激光产生技术-短脉冲、超短脉冲、调Q技术、锁模技术

目录 第1章 什么是激光脉冲 1.1 什么是激光脉冲&#xff08;时间能量维度&#xff09; 1.2 激光脉冲的好处 1.3 巨脉冲激光&#xff08;能量维度&#xff09; 1.4 什么是激光短脉冲与超短脉冲激光&#xff08;时间维度&#xff09; 1.5 长脉冲宽度缺点与短脉冲的优点 1.…

小白学流程引擎-FLowable(三) —流程设计器Flowable UI

一、如何绘制BPMN文件 上文讲到了通过流程定义BPMN文件即可让流程流转起来&#xff0c;并执行来几个核心的功能测试。但是那个看起来复杂的BPMN.xml文件的内容手敲起来有点困难&#xff0c;那么实际真实的场景是什么&#xff0c;或者是怎么完成流程图BPMN文件的绘制呢&#xf…

开源笔记leanote搭建记录

一、leanote 版本二进制编译好的文件&#xff0c;github下载 leanote-linux-386-v2.6.1.bin.tar.gz 二、mongodb docker 部署 版本 4.4 备注&#xff1a;刚开始用5.0.14 版本&#xff0c;启动程序&#xff0c;数据库验证报错 后有用3.0版本&#xff0c;导入初始化数据失败&…

企业网站的建设有哪些事项需要注意呢?

企业网站建设的意义&#xff0c;不仅在于提高了企业的知名度&#xff0c;更重要的是让外界了解企业的产品、服务。随着互联网技术的不断发展&#xff0c;互联网逐渐成为中国最具活力、变化最快的行业。对于网站建设公司来说&#xff0c;这也是一个巨大的市场空间&#xff0c;但…

新买的笔记本电脑分区,笔记本分区分错了怎么重新分

用户新购买的一部笔记本电脑&#xff0c;打开电脑一看就傻眼了&#xff0c;电脑中只有一个内存为1.8T的C盘&#xff0c;像是D盘、E盘、F盘都不知道在哪里&#xff0c;他赶紧咨询旗舰店的客服&#xff0c;客服告知他&#xff1a;“需要对磁盘分区后&#xff0c;才能有D盘、E盘和…

ROS SMACH个人学习记录

ROS SMACH学习个人记录SMACH关于抢占一些TipsSMACH缺点个人的结论本文仅为个人学习记录&#xff0c;结论正确性待考究。欢迎大家讨论SMACH 关于抢占 抢占需要在并发容器里面实现&#xff0c;并发容器里面包含多个状态&#xff0c;我们分成两类&#xff1a;抢占状态与被抢占状…

APK 是怎么来的?- Android 构建流程解析

一、 APK 组成解析 在开始解析 Android 构建流程之前&#xff0c;我们先来看下构建的最终产物 APK 的整体组成 APK 主要由五个部分组成&#xff0c;分别是&#xff1a; Dex&#xff1a;.class 文件处理后的产物&#xff0c;Android 系统的可执行文件 Resource&#xff1a;资源…

Android S(31) APP 页面绘制流程

接上一篇app 启动流程调用OnCreate方法&#xff0c;页面布局绘制进入setContentView 1、加载布局setContentView() 这里getWindow()直接返回mWindow&#xff0c;这个早在onCreate 调用前Activity#attach里面完成初始化。 进入attach方法&#xff0c;构建一个窗体对象PhoneWind…

[附源码]SSM计算机毕业设计疫情防控下高校教职工健康信息管理系统JAVA

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

Docker Cgroups资源控制

目录 一、cgroups简介 cgroups有四大功能&#xff1a; 二、cpu时间片的概念 三、对CPU使用的限制 1 设置CPU使用率上限 &#xff08;1&#xff09;查看容器的默认CPU使用限制 2 设置CPU资源占用比&#xff08;设置多个容器时才有效&#xff09; 1&#xff09;创建两个容器…

回归商业初心,宝尊电商“深耕广拓”缔造品牌电商有质增长

今年来&#xff0c;受疫情、通胀、能源等因素影响&#xff0c;全球市场都经历了不同程度的“震荡”。 寒气传递之间&#xff0c;电商行业开始摸索后疫情时代的前进之路。随着财报季来临&#xff0c;市场开始期待从各赛道标杆企业财报中看出行业走势。 11月29日&#xff0c;“…

python3基础语法

Python 常用文件扩展名为 .py&#xff0c;可以新建一个 hello.py 文件开始下面的学习&#xff0c;执行使用命令 python3 hello.py 一、标识符 第一个字母必须是 字母 或 下划线 _标识符的其他的部分由 字母、数字 和 下划线 组成标识符对 大小写敏感 二、保留字&#xff08…

[2022世界杯] 小白也可以看懂的世界杯

⚽文化世界杯 如果问你全球最火,影响力最大的体育赛事是什么&#xff1f;那么很多人会说 “奥运会”&#xff01;当然不完全对&#xff0c;如果从关注度来说 世界杯的影响力更大&#xff01; 世界杯与奥运会的不同在于&#xff1a;会员协会的数量&#xff0c;拥有209个会员协会…

【踩坑】double和BigDecimal的精度问题

【踩坑】double和bigdecimal的精度问题背景debug尝试测试代码结果总结背景 今天生产报了个问题&#xff0c;在申报和预算相同的金额的时候&#xff0c;后台返回超出预算。一开始以为是判断逻辑的问题&#xff0c;找了个数据试了下发现重现不出来。又是改数据又是找前端传参最后…