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

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

效果如图，页面初始效果：

鼠标悬浮后效果：

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

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

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

问题复现：

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

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

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

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

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

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

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

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

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

问题原因：

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

其他

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

赞 (0)

相关推荐

  • vue项目部署到Apache服务器中遇到的问题解决

    最近刚重构完,我们的一个项目,由原来的jsp模式改为了前后端分离,前端选型为vue,开发完成之后第一件时间就是要部署测试,服务端选的是Apache.本来以为很简单的一件事情,几经坎坷部署了两天才算能够正常访问了.先记录如下, 过程搭建Apache环境,vue项目build之后把生成的dist文件放到,Apache下面,启动Apache之后本以为能够正常访问了, 前提说下:vue项目路由model:history ,默认不会出现下面的问题,因为个人感觉项目路径中带个#实在难受 但是发现错误如下:

  • vue项目部署上线遇到的问题及解决方法

    前言 今天把自己写的demo登录写完了,就想着试着走一下部署上线的流程.参考了很多的文档,终于成功进行了部署.在这里将服务器的搭建和vue项目的 部署上线进行整理(都是基础的知识,希望对大家有帮助.对我帮助是很大的) 2.流程 1.服务器搭建 这里我用的是腾讯云的服务器.买了一个域名.没有备案的域名也可以使用.买完服务器进行域名解析. 点击添加解析,按照下面这样填写就行 马赛克是你的外网ip 可以根据你需要的进行修改,我这只是最基本的绑定.其他请自行百度. 3.添加ssh密钥 第一步添加密钥,会

  • 详解Vue项目部署遇到的问题及解决方案

    写在前面 Vue-Router 有两种模式,默认是 hash 模式,另外一种是 history 模式. hash:也就是地址栏里的 # 符号.比如 http://www.example/#/hello,hash 的值为 #/hello.特点:hash 虽然出现 URL 中,但不会被包含在 HTTP 请求中,对后端不会产生什么影响,改变 URL 不会重载页面. history:利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState()

  • vue使用技巧及vue项目中遇到的问题

    这里给大家分享一下vue中的一些技巧,希望对大家有用处.(话不多说上代码) 1,vue路由拦截浏览器后退实现表单保存类似需求(为了防止用户突然离开,没有保存已输入的信息.) //在路由组件中: mounted(){ }, beforeRouteLeave (to, from, next) { if(用户已经输入信息){ //出现弹窗提醒保存表单,或者自动后台为其保存 }else{ next(true);//用户离开 } 请参考vue文档全局钩子和组件钩子 2,路由懒加载写法: // 我所采用的方

  • Vue项目pdf(base64)转图片遇到的问题及解决方法

    Vue项目pdf(base64)转图片遇到的问题及解决方法

    公司有个业务需求,要求后台传pdf的base64编码给前端,前端显示到界面上,后来在网上搜索了很多关于base64转pdf的文章,都写的不是非常的详细,在实现的过程中遇到很多坑,经过一天的研究终于实现了这个功能,分享一下我在这个功能中遇到的问题和解决方法 要注明的是这里用到的核心插件是pdf.js,原理是动态生成canvas标签,然后通过pdf.js生成一个能渲染出pdf的对象,随后渲染每个canvas,并且生成的pdf是画面的形式,并没有pdf之类的控件 引入插件 这里很多博客都是使用Java

  • Vue 项目中遇到的跨域问题及解决方法(后台php)

    Vue 项目中遇到的跨域问题及解决方法(后台php)

    问题描述 前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The valu

  • vue项目中做编辑功能传递数据时遇到问题的解决方法

    vue项目中做编辑功能传递数据时遇到问题的解决方法

    在项目中完成编辑功能时,遇到了这样一个问题:编辑的功能使用的是一个子组件作为弹出框,如图 这里涉及到从父组件向子组件传递数据的问题,这个项目使用的是v1.0,问题是当点击了编辑以后,弹出的子组件中没有获取到父组件传过来的数据,检查后没有发现代码错误,最后解决的方法就是在父组件中,把传递的数据中的每一项都初始化了一遍就好了 creatIssue (type,list,id){ this.modelIssue=true; this.modeltype=type; if(type=='creat'){

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

    1.鼠标悬浮显示不同的背景图片,代码如下: 效果如图,页面初始效果: 鼠标悬浮后效果: 2.for 循环发送axios遇到的问题 问题背景: 在声动语商项目中,需求更改后,出现一个:教师发布课程的时候要求一个课程同时发送给多个班级. 现在的接口:每次只能发送一个班级的id,也就是:classesId字段只能传一个班级的id,因此为了满足这个新需求就想着:将select修改为多选,使用for循环循环用户选中的班级数组,使用axios发送创建课程请求.更改后的界面如下图所示: 问题复现: 思路:使用

  • Vue项目中最新用到的一些实用小技巧

    Vue项目中最新用到的一些实用小技巧

    写在前面 在最近的 Vue 项目中,为了完成需求使用了一些小技巧,做个笔记,或许也能帮到道友. 阅读重点 需求一:为路径配置别名 在开发过程中,我们经常需要引入各种文件,如图片.CSS.JS等,为了避免写很长的相对路径(../),我们可以为不同的目录配置一个别名. 找到 webpack.base.config.js 中的 resolve 配置项,在其 alias 中增加别名,如下: 创建一个 CSS 文件,随便写点样式: .avatar display: flex; justify-conten

  • vue项目中less的一些使用小技巧

    目录 前言 一.样式穿透 1.  什么是样式穿透? 2.  如何使用? 二.混入 1.  什么是混入? 2.  如何使用? 三. less自动化导入 1. 自动化导入好处 2.  如何实现? 总结 前言 我们所能看到的美观的网页都是经过UI精心设计后,由前端攻城狮搭建的.网页想要有炫酷的样式,就需要用到css来处理,其中不乏会出现大量重复.冗余的代码,这时,像less.sass.scss等样式预处理器就出现了,极大地精简了css代码,提高了开发效率.今天跟着本文一起看看在vue项目中使用less

  • Vue项目中封装组件的简单步骤记录

    Vue项目中封装组件的简单步骤记录

    目录 前言 如何封装一个Toast组件 使用案例 具体实现 总结 前言 随着业务的发展 功能性开发 已经无法满足我们对于前端的需求,这一篇主要带大家体验一下如何开发一套属于自己的组件库 使用场景:公司内部组件库的开发,个人组件库的开发,与项目解耦,多项目中使用同一组件,只需维护一套组件库 如何封装一个Toast组件 组件说明: 实现提示功能. 效果展示: 实现的功能: 根据某个判断条件或者点击某个按钮,弹出弹框: 可配置位置,类型,样式名等 使用案例 1. 简单使用 vm.$toast('网络异

  • Vue项目中如何运用vuex的实战记录

    Vue项目中如何运用vuex的实战记录

    目录 Vuex 是什么? vuex使用周期图 我的store目录 实现一个vuex的示例 总结 Vuex 是什么? TIP

  • 一次VUE项目中遇到XSS攻击的实战记录

    一次VUE项目中遇到XSS攻击的实战记录

    目录 前言 发现原因 自定义过滤规则 总结 前言 随着互联网的高速发展,信息安全问题已经成为企业最为关注的焦点之一,而前端又是引发企业安全问题的高危据点.在移动互联网时代,前端人员除了传统的 XSS.CSRF 等安全问题之外,又时常遭遇网络劫持.非法调用 Hybrid API 等新型安全问题.当然,浏览器自身也在不断在进化和发展,不断引入 CSP.Same-Site Cookies 等新技术来增强安全性,但是仍存在很多潜在的威胁,这需要前端技术人员不断进行"查漏补缺". 发现原因 一切

  • Vue项目中使用better-scroll实现一个轮播图自动播放功能

    Vue项目中使用better-scroll实现一个轮播图自动播放功能

    前言 better-scroll是一个非常非常强大的第三方库 在移动端利用这个库 不仅可以实现一个非常类似原生ScrollView的效果 也可以实现一个轮播图的效果 这里就先记录一下自己实现这个效果的一些过程吧 思路 1.首先要确定自己的HTML结构 基本结构就是一个wrapper包含一个content 2.其次需要明白的一个页面可以滚动的原理在于 当内容的高度超出了容器的高度才可以实现滚动 如果没有超出 那么就没有滚动的必要 因此第一点需要实现的就是 获取到所有内容的高度 由于实现的是一个轮播

  • Vue项目中配置pug解析支持

    Vue 的用法没有变化: <template lang="pug"> transition(name="sider") div.hello h3 {{msg}} p(:style="{color:'#000'}", :htmlData="msg") p label button(@click="clickMe") clickTest </template> 要注意的一点是: 标签后面

  • Vue项目中使用WebUploader实现文件上传的方法

    Vue项目中使用WebUploader实现文件上传的方法

    简介: WebUploader是由 Baidu WebFE(FEX) 团队开发的一个简单的以 HTML5为主 , FLASH为辅 的现代 文件上传组件 .在现代的浏览器里面能充分发挥HTML5的优势,同时又 不摒弃主流IE浏览器 ,沿用原来的FLASH运行时, 兼容IE6+,iOS 6+, android 4+ .两套运行时,同样的调用方式,可供用户任意选用.采用 大文件分片并发上传 ,极大的提高了文件上传效率. 分片.并发 分片 与 并发 结合,将一个大文件分割成多块, 并发上传 ,极大地提高

  • 在Vue项目中使用Typescript的实现

    在Vue项目中使用Typescript的实现

    3.0迟迟没有发布release版本,现阶段在Vue项目中使用Typescript需要花不小的精力在工程的配置上面.主要的工作是webpack对TS,TSX的处理,以及2.x版本下面使用class的形式书写Vue 组件的一些限制和注意事项. Webpack 配置 配置webpack对TS,TSX的支持,以便于我们在Vue项目中使用Typescript和tsx. module.exports = { entry: './index.vue', output: { filename: 'bundle

随机推荐