vue 过滤器filter中this为undefined

vue过滤器filters 中this为undefined

<span>{{form.legalSettlementTimeUnit | transUnit}}</span>

filters: {
    transUnit(val) {
      console.log(this) // undefined
      return val ? this.timeLimitMap[val] : ''
    }
}

可以使用computed解决：

<span>{{transUnit(form.legalSettlementTimeUnit)}}</span>

computed: {
   ...mapState(['timeLimitMap', 'rightMap']),
   transUnit(val) {
     return (val) => val ? this.timeLimitMap[val] : ''
   }
}

vue中的过滤器更偏向于对文本数据的转化，而不能依赖this上下文，如果需要使用到上下文this我们应该使用computed计算属性的或者一个method方法