随手记:vue2 filters this指向undefined

今天在使用filters的时候,需要用到this的数据,结果发现,this打印出来的是undefined

原因: 过滤器注册在vue实例之前,所以this指向了window,但是因为严格模式原因,为 undefined;

所以需要全局声明this,在filters中才能指向vue

javascript 复制代码
    //表格中插槽使用filters的地方
      <template #joinStatus>
          <el-table-column label="随访状态" align="center">
            <template slot-scope="scope">
              {{ scope.row.joinStatus | joinStatusFilter(that) }}
            </template>
          </el-table-column>
        </template>


    //在data中声明that 指向this
    data() {
        return{
            // 保存this以便filter中使用
            that: this,
        }
    }
      

    filters: {
      joinStatusFilter(value, that) {
        let status = that.statusList.find(item => item.value == value);
        return status? status.label : '';
      }
    },
相关推荐
慢半拍iii14 分钟前
JAVA Web —— A / 网页开发基础
前端
gnip33 分钟前
pnpm 的 monorepo架构多包管理
前端·javascript
zolty40 分钟前
基于hiprint的票据定位打印系统开发实践
javascript
新手村领路人2 小时前
Firefox自定义备忘
前端·firefox
乖女子@@@2 小时前
css3新增-网格Grid布局
前端·css·css3
百思可瑞教育2 小时前
使用UniApp实现一个AI对话页面
javascript·vue.js·人工智能·uni-app·xcode·北京百思可瑞教育·百思可瑞教育
伐尘3 小时前
【CE】图形化CE游戏教程通关手册
前端·chrome·游戏·逆向
不想吃饭e3 小时前
在uniapp/vue项目中全局挂载component
前端·vue.js·uni-app
非凡ghost3 小时前
AOMEI Partition Assistant磁盘分区工具:磁盘管理的得力助手
linux·运维·前端·数据库·学习·生活·软件需求
UrbanJazzerati3 小时前
前端入门:margin居中、border、box-radius、transform、box-shadow、mouse事件、preventDefault()
前端·面试