Vue.js 和 vue-moment：“无法解析过滤器：时刻”答案

【问题标题】：Vue.js and vue-moment: "Failed to resolve filter: moment"Vue.js 和 vue-moment：“无法解析过滤器：时刻”
【发布时间】：2017-01-28 19:24:52
【问题描述】：

尝试使用vue-moment。文档中最简单的示例不起作用：https://jsfiddle.net/rjcpz9wt/

<span>{{ new Date() | moment "dddd, MMMM Do YYYY" }}</span>

给予：

[Vue warn]: Failed to resolve filter: moment

发生了什么事？

【问题讨论】：

标签： javascript momentjs vue.js

【解决方案1】：

vue-moment 坏了。

您不能通过将其添加为<script> 标记来使用它。目前它只有在使用 webpack 或 browserify 编译时才有效，请参阅issue 了解更新。

它曾经在原始版本上运行良好： https://github.com/brockpetrie/vue-moment/tree/fd6fcb901415c1df4c5abb81870d49b346d3732f

在此处查看原始版本：https://jsfiddle.net/gerardog/vaw33sn2/

另外，在 Fiddle 上不要链接到 https://raw.github.com/ 中的文件，使用这个很好 workaround

【讨论】：

我这么认为@Gerardo Grignoli ,, :/ ，谢谢^.^ 我会试试的

【解决方案2】：

/////编辑/////

显然您根本不需要将时刻放在 Vue.filter(....) 中。

在main.js 中输入Vue.use(VueMoment) 后，只需在您的应用中的任何位置放置一个过滤器，如他们的文档中所示，它就可以工作

/////////////

我也遇到了同样的问题，不使用vue过滤器解决了

这是我的解决方法，我的 main.js 看起来像这样：

import Vue from 'vue'
import VueMoment from 'vue-moment';

Vue.use(VueMoment)

在我需要使用的组件中，它看起来像这样：

//IN METHODS:
methods: {
    tellTime(time) {
      console.log(this.$moment(time).format(' mm:ss'))
    }
}

<!-- OR IN TEMPLATE -->
      {{$moment(timestamp).fromNow()}}

希望其他人会觉得它有用:)

【讨论】：

【解决方案3】：

我不建议你这样做，你应该在 javascript 代码中创建日期变量，然后在你的 Vue.js 中访问该变量。这是一个显示我的意思的小提琴

https://jsfiddle.net/rdffywc7/

var app = new Vue({
  el: document.body,
  data: {
    date: moment().format("dddd, MMMM Do YYYY")
  }
})

然后在文档正文中

<span>{{ date }}</span>

【讨论】：

基本上你避免加载 vue-moment ......你知道如何让它正确加载 JS 吗？
没关系，我想通了... @Ruby 对于与显示今天日期不同的用法，我不会推荐这种方法。因为您的数据模型包含日期的字符串表示，而不是日期本身。

【解决方案4】：

我的回答可能为时已晚，但对于目前面临此问题的其他人仍然有用。正如@Gerardo Grignoli 所说，vue-moment 坏了，所以我个人使用了

import moment from "moment"
Vue.prototype.$moment = moment; 
// later in component 
computed: {
    theDate(){ 
        return this.$moment('2019-10-30T11:10:21.484894Z').format('DD.MM.YYYY'); 
    }
}

【讨论】：