如何将 date-fns 与 Vue 类组件一起使用？

Question

Vue 组件：

<template>
  <div class="doc">
    {{ format(2019-08-11T08:13:13.750007, 'DD/MM/YYYY') }}
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import format from 'date-fns/format'

@Component
export default class Document extends Vue {
  public format: string | number | Date = ''
}
</script>

抛出错误： Error in render: "TypeError: _vm.format is not a function"

我怀疑这是因为format被认为是Document类属性，而不是date-fns的方法。 我该如何解决？ 在纯 JavaScript 中，它开箱即用。

Answer 1

代替 class property ，将format声明为调用导入函数的类方法：

import { Component, Vue } from 'vue-property-decorator'
import format from 'date-fns/format'

@Component
export default class Document extends Vue {
  format(date: string | number | Date, dateFormat: string): string {
    return format(date, dateFormat)
  }
}