Измените локаль в данный момент, не обновляйте компонент vuejs соответственно - PullRequest
Новая
       7

Измените локаль в данный момент, не обновляйте компонент vuejs соответственно

0 голосов
/ 21 ноября 2018

У меня есть класс js, Пользователь, с объектом момента внутри: 

import moment from 'moment'
class User {
    expirationDate = moment();
}

Я хочу отобразить эту дату в соответствии с языком приложения.Я использую VueJS.Чтобы обеспечить легкий доступ к переменной момента внутри компонента Vue, я выставил переменную момента: 

Vue.prototype.$moment = moment;

Внутри одного из моих компонентов у меня есть кнопка, позволяющая пользователю изменять его локаль. 

this.$moment.locale(newLocale); // newLocale can be en-us, zh-cn, ....

Но дата не переведена.Чтобы пойти дальше, я внутри того же модуля сделал следующую созданную функцию: 

  created: function() {
    setInterval(() => {
      console.log(this.$moment.locale());
      console.log(this.user.expirationDate.format('ll'));
      console.log(this.$moment().format('ll'));
    }, 1000);
  }

и вот результат 

UserProfile.vue?ebc3:52 en
UserProfile.vue?ebc3:52 Nov 30, 2018
UserProfile.vue?ebc3:53 Nov 21, 2018
UserProfile.vue?ebc3:51 zh-cn
UserProfile.vue?ebc3:52 Nov 30, 2018
UserProfile.vue?ebc3:53 2018年11月21日

Так что я не понимаю, почему форматирование моегопользовательский момент не работает.Я боялся, что экземпляр переменной момента не совпадает между $ моментом и тем, который использовался в моем user.js.В итоге я попытался: 

console.log(this.$moment(this.user.expirationDate).format('ll'));

, но результат тот же: никакого перевода вообще!Я также добавил это в свой класс User: 

import moment from 'moment'
class User {
    expirationDate = moment();
    constructor(data) {
        setInterval(()=>{console.log('from user.js > ' + moment.locale())}, 1000)
    }
}

и уведомил, что локаль верна.Так что, похоже, это не переменная проблема ...

Спасибо за вашу помощь!

1 Ответ

0 голосов
/ 25 февраля 2019

Аналогичная проблема:

В моем приложении есть верхняя строка, содержащая выбранные данные для изменения локали.Когда компонент отображается, если я обновляю локаль, компонент повторно не отображается, поэтому формат даты остается прежним ....

Что помогает мне найти чистое решение

Прочитайте эту статью

Практическое решение

Отредактируйте HTML-шаблон вашего AppComponent, добавив этот атрибут :key:"language", например: 

<div :key="language">
    <router-view></router-view>
</div>

Затем отредактируйте свой AppComponent класс: 

data: {
    selectedLanguage: 'fr'
},
computed: {
    language: function () {
      return this.selectedLanguage;
    }
}

Когда значение selectedLanguage будет изменено, тогда значение атрибута key компонента будет изменено и вызовет AppComponentповторный рендеринг и его дочерние элементы также будут повторно отображены.

Чтобы быть уверенным, что конфигурация момента была обновлена ​​перед глобальным повторным рендерингом, обязательно вызовите метод this.$moment.locale(newLocale), прежде чем обновлять selectedLanguage.

PS: я перевелэтот код из моего приложения, использующего Vue Property Decorator и Vuex , пожалуйста, сообщите мне, если я что-то пропустил.

...