踩过的坑


1、路由跳转变量修改问题

想实现根据路由名称的不同修改变量registerRoute的状态,从而通过这个变量来控制某一组件的显示与隐藏

因为是在模板文件中添加的,先直接尝试将data中变量设置为registerRoute:this.$route.name === 'gszc'?true:false,然后发现行不通,因为模板文件中路由跳转时页面未刷新,因此data中值的改变并不会立即更新视图,所以需要将修改的方法放在updated钩子函数中,如此点击链接跳转路由时视图就会立即更新了

...
    updated(){
        this.registerRoute = this.$route.name === 'gszc'?true:false
     }

2、mand mobile中swiper组件事件监听问题

如果要给swiper内部的元素添加事件监听,需要在md-swiper标签上添加is-prevent="false",因为他默认为true,不设置的话将会阻止默认的事件

3、elementUI中el-select传值为对象的问题

业务有一个添加和编辑表单的功能,后端要求通过表单接收两个值,一个部门ID一个部门名字,且要求这俩值与其他属性平级,因此将select的option的value绑为一个对象,在提交的方法里再将value的值取出,放入表单的对象中进行传值,el-select中识别对象的标识仅需要添加value-key即可,添加功能没啥问题

编辑时需要接受后端传来的值,我本来的想法是将接收到的值处理成和option绑定value一样的对象,但发现死活渲染不上,然后通过console比对俩对象,发现根本不相等,接着就想到根据接收到的部门ID获取当前部门在options数组中的下标,然后将数组中对应下标的对象绑定到v-model,这样就能成功渲染了

4、父级html给子级iframe传值跨域问题

父级使用PostMessage传值给子

document.getElementById('iframe').contentWindow.postMessage('message', '*')      //message为传过去的数据,字符串、对象、数组均可,*代表任意域名

子级使用window.addEventListener接受数据

window.addEventListener('message', function(e){
        console.log(e.data)
    })

由于子级iframe加载较慢,使用PostMessage发送数据时要等子级加载完成后方能发送,否则发过去子级也接收不到,因此需要将代码写在window.onload中(此bug困扰我接近1天,实在不应该)

5、vue中关于路由拦截与组件生命周期的顺序问题

router.beforeEach会比组件的周期先执行,我在组件的destroyed周期中执行了函数,本以为会是它先销毁再执行路由拦截中的方法,没想到是先执行路由拦截的方法,再执行组件的生命周期

路由跳转时组件之间的生命周期顺序,先执行to组件的beforeCreate,created,beforeMount以后再执行from组件的destroyed,接着才是to组件的mounted

6、vue项目中的代理配置问题

vue2的代理配置在vue.config.js中,配置好后axios的baseUrl路径也应该改成'/api'(如果代理配置的前缀是/api的话),如果baseUrl的路径为全路径的话代理将会不起作用

7、点击提交按钮时页面刷新的问题

提交按钮的button位于form标签中,没有加type,所以表单会执行提交操作,会刷新页面,需要给button加上type="button"阻止默认提交事件

8、换行相关问题

在内容中添加\n进行换行时,页面并未渲染\n字符,但也没有换行效果,这里需要给他的父级css加上white-space:pre-line属性,这样就可以生效了

9、浏览器preview和response的值不一致

浏览器会自动把response中的值转成JSON格式,再显示到preview中,然而JavaScript存在数字精度问题,因此当接口的值(例如id)是多位数字而不是字符串时,转换时会出现数字不一样的问题,因此要以response的值为准


点赞1
点击评论1
收藏0
浏览 75
 

还没有评论,快来发表第一个评论吧

免责声明:凡在本网站出现的信息,均仅供参考。本网站将尽力确保所提供信息的准确性及可靠性,但不保证有关资料的准确性及可靠性,注册用户和一般页面游览者在使用前请进一步核实,并对任何自主决定的行为负责。本网站对有关资料所引致的错误、不确或遗漏,概不负任何法律责任(包括侵权责任、合同责任和其它责任)
*尊重作者,转载请注明出处!