如何在CodePen中使用DateFNS? (未定义dateFns)

时间:2018-07-08 16:45:09

标签: javascript vue.js codepen date-fns

我需要在CodePen中使用DateFNS,但无法使其正常工作。 错误:

  

“ [Vue警告]:data()中的错误:“ ReferenceError:未定义dateFns”   (位于中)”

这是我的示例CodePen:https://codepen.io/anon/pen/eKqxmd

    <div id="app">
  <v-app id="inspire">
    <v-layout>
      <v-flex xs12 sm6 offset-sm3>
        <v-card>
          <v-card-title primary-title>
            <div>
              <h3 class="headline mb-0">DATE {{ todaysDateMin }}</h3>
            </div>
          </v-card-title>
        </v-card>
      </v-flex>
    </v-layout>
  </v-app>
</div>

    import { format } from 'date-fns'
new Vue({
  el: '#app',
  data () {
    return {    
      todaysDateMin: dateFns.format(new Date(), '[Today is a] dddd')
    }
  }
})

2 个答案:

答案 0 :(得分:2)

在CodePen中转到Settings -> JavaScript,然后在外部资源搜索中键入date-fns,然后从下拉列表中进行选择。

然后调用它就需要附加dateFns.,就像您已经在做的一样。

dateFns.format(new Date(), '[Today is a] dddd')

并删除导入语句

答案 1 :(得分:1)

您正在做import { format } from 'date-fns',所以您只需要做format(new Date(), '[Today is a] dddd')而不是dateFns.format,因为就像错误所说的那样,dateFns没有定义