记录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 相关文章推荐
Prototype使用指南之form.js
Jan 10 Javascript
Prototype PeriodicalExecuter对象 学习
Jul 19 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
Jun 28 Javascript
jQuery.buildFragment使用方法及思路分析
Jan 07 Javascript
jquery实现简易的移动端验证表单
Nov 08 Javascript
深入浅析Bootstrap列表组组件
May 03 Javascript
基于jQuery实现弹幕APP
Feb 10 Javascript
Vue-router 类似Vuex实现组件化开发的示例
Sep 15 Javascript
vue-router重定向不刷新问题的解决
Jun 25 Javascript
vue element table 表格请求后台排序的方法
Sep 28 Javascript
微信小程序前端自定义分享的实现方法
Jun 13 Javascript
JavaScript中作用域链的概念及用途讲解
Aug 06 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
BBS(php & mysql)完整版(二)
2006/10/09 PHP
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
PHP连接MSSQL2008/2005数据库(SQLSRV)配置实例
2014/10/22 PHP
php递归遍历多维数组的方法
2015/04/18 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
Javascript 网页黑白效果实现代码(兼容IE/FF等)
2010/04/23 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
2013/04/28 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
2013/06/09 Javascript
基于jquery的文章中所有图片width大小批量设置方法
2013/08/01 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
JavaScript制作的可折叠弹出式菜单示例
2014/04/04 Javascript
jquery xMarquee实现文字水平无缝滚动效果
2014/04/29 Javascript
javascript实现验证IP地址等相关信息代码
2015/05/10 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
JavaScript中点击事件的写法
2016/06/28 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
p5.js入门教程之键盘交互
2018/03/19 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
使用webpack将ES6转化ES5的实现方法
2019/10/13 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
原生js+canvas实现验证码
2020/11/29 Javascript
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
python抓取网页图片并放到指定文件夹
2014/04/24 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
python爬虫开发之Request模块从安装到详细使用方法与实例全解
2020/03/09 Python
Python库安装速度过慢解决方案
2020/07/14 Python
css3旋转木马_动力节点Java学院整理
2017/07/12 HTML / CSS
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
拉歌口号大全
2014/06/13 职场文书
汽车转让协议书
2015/01/29 职场文书
大学生学生会工作总结2015
2015/05/26 职场文书
家长意见书
2015/06/04 职场文书
2016银行求职自荐信
2016/01/28 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers
Java对文件的读写操作方法
2022/04/29 Java/Android