javascript - 如何在 Vue 类组件中使用 date-fns？

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

代替类属性，声明为调用导入函数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)
  }
}