记录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 相关文章推荐
自动检查并替换文本框内的字符
Jun 30 Javascript
用js+xml自动生成表格的东西
Dec 21 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
Javascript动态绑定事件的简单实现代码
Dec 25 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
Mar 29 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
Jul 25 Javascript
jQuery筛选器children()案例详解(图文)
Feb 17 Javascript
原生JS实现图片轮播切换效果
Dec 15 Javascript
jQuery插件ContextMenu自定义图标
Mar 15 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
vue 2.0 购物车小球抛物线的示例代码
Feb 01 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
May 20 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 pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
javascript动态向网页中添加表格实现代码
2014/02/19 Javascript
获取当前点击按钮的id用this.id实现
2014/03/17 Javascript
jquery-syntax动态语法着色示例代码
2014/05/14 Javascript
javascript实现详细时间提醒信息效果的方法
2015/03/11 Javascript
详解nodejs 文本操作模块-fs模块(三)
2016/12/22 NodeJs
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
fetch 使用及如何接收JS传值
2017/11/11 Javascript
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
2018/09/08 Javascript
es6数值的扩展方法
2019/03/11 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
原生js实现自定义消息提示框
2020/11/19 Javascript
JavaScript实现无限轮播效果
2020/11/19 Javascript
对Python 两大环境管理神器 pyenv 和 virtualenv详解
2018/12/31 Python
Pytorch 神经网络—自定义数据集上实现教程
2020/01/07 Python
python实现tail -f 功能
2020/01/17 Python
CSS3实现银灰色动画效果的导航菜单代码
2015/09/01 HTML / CSS
英国最大的体育&时尚零售公司:JD Sports
2017/12/13 全球购物
医学类导师推荐信范文
2013/11/19 职场文书
幼儿园教师教育感言
2014/02/28 职场文书
服务型党组织建设典型材料
2014/05/07 职场文书
党员演讲稿
2014/09/04 职场文书
师德师风剖析材料
2014/09/30 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
化工见习报告范文
2014/10/31 职场文书
建筑安全员岗位职责
2015/02/15 职场文书
2015年电气技术员工作总结
2015/07/24 职场文书
公司费用报销管理制度
2015/08/04 职场文书
《角的度量》教学反思
2016/02/18 职场文书
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL