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

news/2024/4/29 15:55:59/文章来源:https://blog.csdn.net/qq_59110215/article/details/128138358

提纲挈领:

我的操作:

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.luyixian.cn/news_show_228861.aspx

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

相关文章

leetcode-每日一题-1779-找到最近的有相同 X 或 Y 坐标的点(简单,数学思想)

今天这道每日一题很简单,没啥可说的,细心点即可 1779. 找到最近的有相同 X 或 Y 坐标的点 难度简单73收藏分享切换为英文接收动态反馈 给你两个整数 x 和 y ,表示你在一个笛卡尔坐标系下的 (x, y) 处。同时,在同一个坐标系下给你一…

GEE开发之Modis_GPP数据分析和获取

GEE开发之Modis_GPP数据分析和获取1.GPP2.MOD系列和MYD系列区别3.MOD17A2H(500m/8天)4.MYD17A2H(500m/8天)4.1 MYD17A2H下的指数4.2 遥感影像查看5.GPP日数据下载(以MYD17A2H为例)6.GPP月数据下载(以MYD17A2H为例)7.GPP年数据下载(以MYD17A2H为例)前言:主要介绍利用…

flask入门教程之数据库保存

计算机操作数据时,一般是在内存中对数据进行处理,但是计算机的内存空间有限,服务器操作大量数据时,容易造成内存不足,且一旦计算机关机,则内存数据就丢失。所以我们需要将数据进行存储。 持久化&#xff0…

Java 基础数据类型占用内存空间和字符串编码简介(二)

Java 基础数据类型占用内存空间简介一 计算机简介1.基本概念2.CPU 三级缓存3.本机参数查看二 数据占用内存情况1.多线程Demo2.结果解析1.直接计算2.volatile 计算3.缓存行填充一 计算机简介 结合多线程计算机的硬件,从侧面理解数据存储如何影响我们的程序 1.基本概…

门面/外观模式

一、门面模式 1、定义 门面模式(Facade Pattern)又称作外观模式,是指提供一个统一的接口,用来访问子系统中的一群接口,属于结构型设计模式。 门面模式的主要特征是定义了一个高层接口,让子系统更容易使用。…

自然语言处理NLP——ERNIE-M:基于回译机制的“预训练-微调”多语言模型

目录 系列文章目录 一、背景介绍 1.多语言任务 1.1 多语言任务定义 1.2 多语言任务难题 2.多语言模型 2.1 多语言模型定义与原理 2.2 多语言模型困难 3.论文简介 3.1 背景与开发动机 3.2 论文梗概 3.3 论文贡献与成就 二、相关工作 1.预训练方法 1.1 预训练方法…

Tomcat的安装、在idea中的使用以及创建Web项目

目录Tomcat的安装Tomcat运行Tomcat在idea中的使用创建Web项目最后Tomcat的安装 Tomcat的官网: https://tomcat.apache.org/ 从官网上可以下载对应的版本进行使用。 下载windows64位,版本自行选择。 下载好之后找到压缩包进行解压,注意目录不要有中文且…

1. 一些截图方法的比较;2. 将截图直接转换为PDF并拼接,与插入Word后再转换为PDF的对比

1. 一些截图方法的比较 1.1. 有时候当某个软件没有导出功能,或者导出功能受限,比如 tableau public,但又需要获取展示出的可视化信息时,就需要用到截图。如果这些截图还要用在正式文档中,就需要是高清的,至…

[附源码]Python计算机毕业设计SSM篮球馆预约小程序(程序+LW)

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

TypeScript(TS)基础内容详细介绍

目录 一、TypeScript概念 二、TypeScript特点 三、开发环境配置 四、初识ts 五、TypeScript类型声明 1、any: 2、number数字类型 3 string字符串类型 4 boolean布尔类型 表示逻辑值:true 和 false。 5 数组类型 6 元组类型 7 enum枚举类型…

Java8 函数式编程【基础篇】

Java 8是Java在保持向后兼容的前提下首次迈出重要一步,相比之前,不再是只对类库的改良,在编写复杂的集合处理、并行化执行、代码简洁度等方面都有颠覆性的提升。本文将探索和理解函数式编程的含义,以及它在Java 8中的实现。 一、…

全光谱台灯对孩子有伤害吗?儿童用台灯的好处和坏处是什么

全光谱台灯是指灯光色谱丰富度与太阳光一般全面的台灯,这样的灯光照射下的任何物体,不但颜色丰富多彩,而且极其真实,无限接近太阳光下的真实色彩,对人眼舒适度有巨大的提升,所以全光谱台灯不但对孩子无害&a…

【文件I/O】标准IO:库函数

标准IO:库函数一、基本概念1.文件类型2.标准I/O介绍3.流的概念4.文本流和二进制流5.流的缓冲类型6.标准I/O流(stdin、stdout、stderr)二、标准I/O函数1.fopen、fclose、errrno、strerror、perror(打开、关闭文件,输出错…

小程序开发音视频问题汇总及解决方案

目录 问题一:开发音视频,必用的两个小程序组件live-player和live-pusher,他们做什么用的,怎么才能使用? 问题二:一个页面只能插入一个 问题三:真机调试图片预览及视频全屏无反应 问题四&am…

在vue项目中下载swiper出现:Do not use ‘new’ for side effects报错问题

我报错的情况是:我在单文件组件vue文件中使用new Swiper,报了两个错误,图示: 第一个错误是:‘Swiper’ is not defined 第二个错误是:Do not use ‘new’ for side effects 解决办法: &#x…

5G无线技术基础自学系列 | MU-MIMO原理

素材来源:《5G无线网络规划与优化》 一边学习一边整理内容,并与大家分享,侵权即删,谢谢支持! 附上汇总贴:5G无线技术基础自学系列 | 汇总_COCOgsta的博客-CSDN博客 MU-MIMO是指多个用户在上下行数据传输时…

【Linux】命令

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

[附源码]计算机毕业设计JAVA校园共享单车系统

[附源码]计算机毕业设计JAVA校园共享单车系统 项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybati…

二、【React拓展】懒加载 lazy

文章目录1、适用点2、汇总1、适用点 懒加载往往配合路由一起使用&#xff0c;此处修改的项目是 二、【React-Router5】路由的基本使用 中的项目 首先从react中引入lazy import { lazy } from react 修改引入路由组件的写法 // import About from ./pages/About // import Home…

SequoiaDB湖仓一体分布式数据库2022.11月刊

本月看点速览 产品能力再获认可&#xff0c;入围多个榜单、报告 ‍精彩亮相2022沙丘大会湖仓一体专场 实力吸睛&#xff0c;获多家权威媒体关注与报道 生态圈不断扩大&#xff0c;与6家合作伙伴完成互认证 青杉计划2023进行中&#xff0c;一起攀登更高的“杉” 产品能力再获…