随手记: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 : '';
      }
    },
相关推荐
U***e6315 分钟前
JavaScript数据分析
开发语言·javascript·数据分析
q_191328469531 分钟前
基于SpringBoot2+Vue2的宠物健康医疗论坛系统
vue.js·spring boot·mysql·健康医疗·宠物·计算机毕业设计
IT_陈寒1 小时前
Spring Boot 3.2 性能翻倍秘诀:这5个配置优化让你的应用起飞🚀
前端·人工智能·后端
b***67641 小时前
【JavaEE】Spring Web MVC
前端·spring·java-ee
Mintopia1 小时前
🧭 Claude Code 用户工作区最佳实践指南
前端·人工智能·claude
Mintopia1 小时前
🌐 多用户并发请求下的 WebAIGC 服务稳定性技术保障
javascript·人工智能·自动化运维
一 乐2 小时前
健身达人小程序|基于java+vue健身达人小程序的系统设计与实现(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·小程序
笑醉踏歌行4 小时前
NVM 在安装老版本 Node环境时,无法安装 NPM的问题
前端·npm·node.js
YUJIANYUE4 小时前
Gemini一次成型龙跟随鼠标html5+canvas特效
前端·计算机外设·html5
abiao19814 小时前
npm WARN ERESOLVE overriding peer dependency
前端·npm·node.js