随手记: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 : '';
      }
    },
相关推荐
子兮曰7 分钟前
别把它当成一次普通“源码泄露”:Claude Code 事件给 AI Agent 团队提了什么醒
前端·npm·claude
心之语歌17 分钟前
Vue2 data + Vue3 ref/reactive 核心知识点总结
开发语言·前端·javascript
诸葛亮的芭蕉扇19 分钟前
tooltip-position-solution
前端·vue.js·elementui
程序员小寒22 分钟前
JavaScript设计模式(六):职责链模式实现与应用
java·javascript·设计模式
LXXgalaxy39 分钟前
`摸鱼决策轮盘`【vue3+ts前端实战小项目】
前端
这是个栗子44 分钟前
关于 TypeScript 的介绍
前端·javascript·typescript
亿元程序员1 小时前
亿元Cocos小游戏实战合集指南和答疑
前端
开开心心就好1 小时前
伪装文件历史记录!修改时间的黑科技软件
java·前端·科技·r语言·edge·pdf·语音识别
踩着两条虫1 小时前
AI驱动的Vue3应用开发平台深入探究(十八):扩展与定制之集成第三方库
vue.js·人工智能·低代码·重构·架构
饼干哥哥1 小时前
聊了50个AI出海的市场团队,我总结了达人营销的7宗罪
前端