随手记: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 : '';
      }
    },
相关推荐
沸点小助手39 分钟前
「国产龙虾谁能打过OpenClaw & 你敢让微信龙虾碰代码吗」沸点获奖名单公示|本周互动话题上新🎊
前端·后端·面试
skywalk816341 分钟前
请学习kotti的前端(kotti其实是没有分离的前端的)实现,做到形似kotti那样的前端页面。
前端·学习
UI设计兰亭妙微1 小时前
兰亭妙微加载体验设计白皮书:从骨架屏到后台加载的全场景优化策略
前端·b端界面设计·ui设计公司
逆光如雪1 小时前
移动端卡片边框怎么做高级?我用 CSS 实现了设计师的刁钻要求
前端·css·vue.js
scan7241 小时前
龙虾读取session历史消息
java·前端·数据库
莹宝思密达1 小时前
地图显示西安经济开发区边界线-2023.12
前端·vue.js·数据可视化
小龙报1 小时前
【Coze-AI智能体平台】Coze OpenAPI 开发手册:鉴权、接口调用与 SDK 实践
javascript·人工智能·python·深度学习·microsoft·文心一言·开源软件
lizhongxuan1 小时前
LLM Wiki:让大模型替你打理知识库的完整指南
前端·后端·面试
神の愛1 小时前
利用json-to-ts工具进行转换,放置在typeScript.ts文件中
javascript·typescript·json
宇擎智脑科技2 小时前
Claude Code 源码分析(七):终端 UI 工程 —— 用 React Ink 构建工业级命令行界面
前端·人工智能·react.js·ui·claude code