踩过的坑
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的值为准
还没有评论,快来发表第一个评论吧