踩过的坑

233 阅读2分钟
<formHeader ref="form-header" @reset="empty" @renderTable="tableRender"></formHeader>

报错:form-header ref的值不能这样写

判断数组:Array.isArray(this.useDate)

<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" 
    :page-sizes="[ 20, 50, 100, 500]" :page-size="listDetail.pageSize" :current-page="currentPage"
     layout="total, sizes, prev, pager, next, jumper" :total="listDetail.total">
 </el-pagination>
 //:current-page="currentPage"可省略,重置页数时可用上
 //规范代码::total="listDetail.total"   listDetail=res
// 带有默认值的对象
   propE: {
     type: Object,
     // 对象或数组默认值必须从一个工厂函数获取
     default: function () {
       return { message: 'hello' }
     }
   },
   ```
   
   ```
    modelVersion(val){ 
           let temp=[]
           this.$http.get(this.$api.modelVersion,{gpsModel:val}).then(res=>{
               res.forEach(function (params) {
                   // console.log(this.gpsVerssss); gpsVerssss undfinde //此处this绑定到调用对象res
                   console.log(this);  
               })  
           })
       },

解决办法:

modelVersion(val) {
            this.gpsVertionList = [];
            this.$http
                .get(this.$api.modelVersion, { gpsModel: val })
                .then(res => {
                    res.forEach(params => {//箭头函数,this指向上下文环境this
                        this.gpsVertionList.push(params.version);
                    });
                });
        },

http://localhost:8080/#/iot/gpsDeviceTabs/868016319070405/first/[object Object] url不能放对象

分页组件,如果需要搜索时当前页重置为1,需要绑定:current-page="params.page"

echarts报错:1、Uncaught (in promise) TypeError: Cannot read property 'getAttribute'

问题还原:router-link 会守卫点击事件,让浏览器不再重新加载页面,生命周期钩子也就不会执行。 于是想到:用beforeRouterEnter守卫 但是:初始化echarts需要先获取id为echart的dom: 问题:document.getElementById("chartBars")有时为null

解决方案一:路由配置里,isRefresh页面刷新

{
                    name:'timeExceptionInfo',
                    path:'/iot/  
                    component: () => import('../components/p 
                    meta: {title:'工时异常信息', isRefresh:true} 
 }, 

路由: 全局前置守卫:beforeEach

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中。

to: Route: 即将要进入的目标 路由对象

from: Route: 当前导航正要离开的路由

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
确保要调用 next 方法,否则钩子就不会被 resolved。