【Vue】filters过滤器中不能使用this的解决方案

前言：

filters作为Vue中的过滤器 我们在实际开发中会经常使用到 比如在模板上格式化我们想要的日期 但是使用这个属性也会遇到一些问题 比如我们最常用的时间格式化工具moment.js 当我们把它挂载到全局的时候 会使用：

this.$moment().format('MM月DD日')

这时候会发现报错 提示信息为moment未定义
其实原因就是在fulters中访问不到this
解决方案：

方案一： 不使用fiiters

这是最直接的 不使用自然就不会又问题 可以直接在模板的差值表达式中写过滤的代码 如下：

{{$moment(orderData.checkInTime).format('MM月DD日')}}

这种方式会有些不美观 并且也不大符合代码整洁的要求 所以有了方案二

方案二：使用that代替this

这种方式早就为人所用 但是问题出在 不知道在哪了定义that

步骤：

• 在data中定义一个that=this
• 在需要过滤的过滤器中传入that参数
• 在filter过滤器中使用that即可

代码演示如下：

data() {
    return {
      that:this,//保存this以便filter中使用
      tel: '1222222',
      orderData: {} //订单详情信息
    }
  }

filters: {
    formatedate(val,that) {
      return that.$moment(val).format('MM月DD日')
    }
  }

{{orderData.checkInTime|formatedate(that)}}-{{orderData.checkOutTime|formatedate(that)}}

转自：https://blog.csdn.net/weixin_41568816/article/details/109778846