Question

我现在在Vuejs上迁移时遇到问题。

运行npm install vue-moment并添加到我的脚本后：

<script>

  const moment = require('vue-moment');
...
</script>

我将此添加到了<template>中：

<h1>{{moment('2017-12-20 11:00').fromNow()}}</h1>

我收到此错误：

[Vue警告]：渲染错误：“ TypeError：_vm.moment不是函数”

Answer 1

您是否将时刻添加到全局 Vue对象中，如下所示：

const moment = require('vue-moment');
Vue.use(moment)

仅将其添加到组件的本地范围内将不会使其可在模板中使用。模板中引用的所有内容均来自组件本身。

Answer 2

您可以按照@ red-X所述在全局范围内使用它，但只能将其添加到组件中：

import moment from 'moment'

export default {
   data: () => ({
      moment: moment
   })
}

然后您可以在HTML模板中访问它。

但是我建议您使用计算变量来使用这种代码，并且在html模板中没有逻辑，只需在模板内部呈现计算变量以提高可读性即可。

使用此解决方案，您无需全局或在组件中就可以使用时刻库，只需导入即可。

这是一个例子：

import moment from 'moment'

export default {
   computed: {
      distanceFromNow() {
         return moment('2017-12-20 11:00').fromNow()
      }
   }
}

在您的模板中：

<template>
   <div>
      {{ distanceFromNow }}
   </div>
</template>

Answer 3

import * as momentTemp from 'moment';
const moment = momentTemp["default"];

TypeError：_vm.moment不是Vuejs中的函数

3 个答案: