vue过滤器filter中this指向问题

本文讲述了在Vue项目中,如何在局部过滤器中正确使用`this`,避免因`this`指向问题导致的'方法为undefined'错误。作者通过在data中定义变量接收并保存`this`,解决了这个问题,并给出了具体的filter和使用示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本人在项目中遇到一个情况,在对数据进行格式化时,定义了一个局部过滤器,但是在过滤器中使用this调用methods的方法时,报方法为undefined的错误,打印this,输出结果为undefined,最终在’度娘’的帮助下,解决了问题,在此记录一下。
解决方案:在data中定义一个变量接收this

   that: this, // 保存this以便filter中使用

项目中用到的filter

filters:{
formatReason(state, that) {
      let newVal = "";
      for (let i = 0; i < that.closeReason.length; i++) {
        if (that.closeReason[i].code == state) {
          newVal = that.closeReason[i].name;
        }
      }
      return newVal;
    }
   }

使用

<div>{{state | formatReason(that)}}</div>

完事!!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值