记录vue项目中遇到的一点小问题


Posted in Javascript onMay 14, 2019

1、鼠标悬浮显示不同的背景图片,代码如下:

记录vue项目中遇到的一点小问题

效果如图,页面初始效果:

记录vue项目中遇到的一点小问题

鼠标悬浮后效果:

记录vue项目中遇到的一点小问题

2、for 循环发送axios遇到的问题 问题背景:

在声动语商项目中,需求更改后,出现一个:教师发布课程的时候要求一个课程同时发送给多个班级。

现在的接口:每次只能发送一个班级的id,也就是:classesId字段只能传一个班级的id,因此为了满足这个新需求就想着:将select修改为多选,使用for循环循环用户选中的班级数组,使用axios发送创建课程请求。更改后的界面如下图所示:

记录vue项目中遇到的一点小问题

问题复现:

思路:使用for循环,发送axios,发现请求发送的data中classesId总是最后一个,立马想到了闭包,以为是闭包问题,于是使用

记录vue项目中遇到的一点小问题

这种方法想着解决下闭包,重新发送axios请求发现classesId数据还是不对。然后自我怀疑,以为自己写的闭包是不是有啥问题....

于是使用了第三方lodash的forEach方法一下,将axios请求写到了foreach里面,重新运行还是发现不对。。。。

以为this指向有问题,有将this重新赋值,结果:还是一样。。。。。。。

于是又调整了一下代码:将axios请求重新封装出去,重新在for循环里面调用,结果:还是不对

打断点发现for循环出来的classesId数据是对的,但是加上axios请求,每次请求发送的classesId还只是最后一个的

又想着是不是axios的异步请求影响的,于是将axios改为了同步请求,结果:还是一样,这个时候,整个人就有点不好了。。。。

记录vue项目中遇到的一点小问题

记录vue项目中遇到的一点小问题

眼看着快要下班了,而这个问题已经看了一下午还没有解决,就很着急啊啊啊啊

努力回想自己曾经这样请求过啊,当时并没有发生任何不对。于是想着将请求的数据简化一下,就将发送的data数据简化到了只有classesId,想着只有一个数据了,就没有再定义任何的变量,直接将数据写到了axios请求内部。运行发现:classesId竟然是对的。。。。于是立马将其他数据都写到了axios请求内容,发现结果对了,天啊,终于看到了希望。。。。

记录vue项目中遇到的一点小问题

记录vue项目中遇到的一点小问题

记录vue项目中遇到的一点小问题

问题原因:

将这两种数据的定义及发送方式对比,分析问题可能是因为 js赋值的深拷贝和浅拷贝造成的。。。

其他

解决过程中还试了watch监听for循环classesId的变化,发现也只能监听获取到最后一个classesId.,并不能解决这个问题

Javascript 相关文章推荐
javascript编程起步(第一课)
Jan 10 Javascript
用Div仿showModalDialog模式菜单的效果的代码
Mar 05 Javascript
javascript的解析执行顺序在各个浏览器中的不同
Mar 17 Javascript
jquery获取选中的文本和值的方法
Jul 08 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 Javascript
js获取隐藏元素宽高的实现方法
May 19 Javascript
canvas实现十二星座星空图
Feb 14 Javascript
vue watch自动检测数据变化实时渲染的方法
Jan 16 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 Javascript
深入理解Vue keep-alive及实践总结
Aug 21 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
Jul 17 Javascript
javascript中如何判断类型汇总
May 14 #Javascript
详解如何探测小程序返回到webview页面
May 14 #Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 #jQuery
javascript实现遮罩层动态效果实例
May 14 #Javascript
JQuery animate动画应用示例
May 14 #jQuery
微信小程序的线程架构【推荐】
May 14 #Javascript
jquery实现选项卡切换代码实例
May 14 #jQuery
You might like
php include的妙用,实现路径加密
2008/07/29 PHP
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
JavaScript获取图片真实大小代码实例
2014/09/24 Javascript
JS判断字符串包含的方法
2015/05/05 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
2017/02/14 Javascript
常用的js方法合集
2017/03/10 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
2017/04/19 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
vue组件中使用props传递数据的实例详解
2018/04/08 Javascript
微信小程序与公众号实现数据互通的方法
2019/07/25 Javascript
vue使用一些外部插件及样式的配置代码
2019/11/18 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
2020/08/06 Javascript
解决Vue项目中tff报错的问题
2020/10/21 Javascript
解析Python中while true的使用
2015/10/13 Python
Python实现向服务器请求压缩数据及解压缩数据的方法示例
2017/06/09 Python
详谈python中冒号与逗号的区别
2018/04/18 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
Python pymsql模块的使用
2020/09/07 Python
纯css3实现思维导图样式示例
2018/11/01 HTML / CSS
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
麦德龙官方海外旗舰店:德国麦德龙超市
2017/12/23 全球购物
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
经典而简洁的婚礼主持词
2014/03/13 职场文书
人身意外保险授权委托书
2014/10/01 职场文书
群众路线教育实践活动学习笔记内容
2014/11/06 职场文书
请客吃饭开场白
2015/06/01 职场文书
安全教育观后感
2015/06/17 职场文书
《折线统计图》教学反思
2016/02/22 职场文书
节约用水广告语60条
2019/11/14 职场文书
php+laravel 扫码二维码签到功能
2021/05/15 PHP
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python