如何在 Vue class 组件中使用 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 class 属性，而不是 date-fns 中的方法。我该如何解决？在简单的 JavaScript 中，它开箱即用。

Answer 1

而不是class属性，将format声明为class方法调用导入的函数：

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)
  }
}

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

How to use date-fns with Vue class component?

javascript

typescript

vue.js

vuejs2

date-fns