Как работать с moment.js внутри vue.js?

Question

[lolrofl01]

Привет!
Делаю очень простенький скрипт с датами, хотел сделать поскорее, не используя вебпак, просто добавил vue (т.к. нужна реактивность) и добавил moment. Момент работает без vue отлично. Но внутри самого vue пишет, что функция undefined. Ладно, понимаю, что vue в своей локальной области ищет, и нашел такое решение. В methods добавить:

moment: function () {
            return moment();
        }

И все равно пишет, что функция undefined.

Вот код:

var moment = moment();

var app = new Vue({
    el: '#wrapper',
    data: { },
    methods: {
        makeCalculate: function () {
             var today = moment.format('DD.MM.YYYY');  //отлично работает
       },
       moment: function () {
            return moment();
        }
}
});

Так вот, понадобилось передать аргумент функции moment(). В коде, где комментарий "отлично работает" moment() работает через переменную, соответственно аргумент никак не передать((. А вот moment() или this.moment() (с отсылкой на метод vue) - возвращают "TypeError: moment is not a function". Как быть?

Comments

[Сергей delphinpro]

Как-то сумбурно изложено, и непонятно, что не работает.
Давайте возьмем конкретный пример и на нем разберемся.
Вот это работает: https://jsfiddle.net/pr4k16cg/
Ваш ход.

[lolrofl01]

Сергей delphinpro, Да, все дело было в var moment = moment(). Как убрал - сразу заработало. Спасибо за ответ)

Answer 1

[Павло Пономаренко]

var moment = moment();
Проблема в этом. В момент когда вы пишете var moment - глобальная переменная в этом контексте забывается и появляется локальная. Соответсвенно, когда вы делаете = moment() - он обращается не к глобальной переменной, которую создала библиотека, а к локальной, которую вы создали только что

Просто уберите эту строку и всё должно работать:
var moment = moment();

Comments

[lolrofl01]

Спасибо огромное!

Answer 2

[Lumore]

main.js

import Vue from 'vue';
import moment from 'moment';
Vue.prototype.$moment = moment;

const app = new Vue({
    el: '#wrapper'
});

component:

methods: {
        makeCalculate () {
             return this.$moment().format('DD.MM.YYYY');
       }
}

Comments

[Константин Мужиков]

только не
return this.$moment.format('DD.MM.YYYY');
а
return this.$moment().format('DD.MM.YYYY');

[Lumore]

Константин Мужиков, да, поправил