【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