随手记: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 : '';
      }
    },
相关推荐
风吹心凉9 小时前
第2天|拆解ReAct Prompt:Thought、Action、Observation与信息流
javascript·react.js·prompt
今天AI了吗9 小时前
【AI】一文讲清 RAG:从大模型局限到企业级知识库落地流程
前端·javascript·人工智能·python·深度学习·机器学习·easyui
hunterandroid9 小时前
[鸿蒙从零到一] HarmonyOS 冷启动瀑布图分析与关键路径裁剪实战
前端·华为
郭邯9 小时前
用 Canvas 实现纯前端图片格式互转:PNG/JPG/WebP 一键切换,还能控制质量与尺寸
前端
shmily麻瓜小菜鸡9 小时前
JavaScript / TypeScript 易踩坑知识点完全指南 -假值(Falsy Values)完全指南
开发语言·javascript·typescript
工边页字9 小时前
Electron应用的8种防护方式
前端·javascript·electron
卤蛋fg610 小时前
vue 抽屉组件挂载到指定元素内显示,,表格自适应弹窗宽高
vue.js
小鱼咕噜咕噜10 小时前
Element UI的el-upload文件上传与ZIP文件解压上传
javascript
labixiong10 小时前
z-index: 99999 输给 z-index: 2?原生弹窗的 Top Layer 排位战:后进者居上、看得见却点不着
前端·html