Vue - Перевод в одном компоненте файла - PullRequest
Новая
       22

Vue - Перевод в одном компоненте файла

0 голосов
/ 19 января 2019

Я использую vue-i18n для своих переводов, и это прекрасно работает!Но когда я использую функцию this.$t() внутри функции data одного компонента файла, перевод не работает. 

 <template>
  <VFooter
      app
      height="auto"
      color="secondary">
    <VLayout
        justify-center
        row
        wrap>
      <VBtn
          v-for="link in links"
          :key="link.name"
          :to="{ name: link.name }"
          flat
          round
          active-class>
        {{ link.label }}
      </VBtn>
      <VFlex
          py-3
          text-xs-center
          xs12>
        &copy;{{ currentYear }} — <strong>{{ $t('site_name') }}</strong>
      </VFlex>
    </VLayout>
  </VFooter>
</template>

<script>
  export default {
    name: 'TheSiteFooter',
    data() {
      return {
        links: [
          { name: 'what-is-pinshop', label: this.$t('footer.what_is_pinshop') },
          { name: 'contact-us', label: this.$t('footer.contact_us') },
          { name: 'cookie-policy', label: this.$t('footer.cookie_policy') },
          { name: 'privacy-policy', label: this.$t('footer.privacy_policy') },
          { name: 'terms-and-conditions', label: this.$t('footer.terms_and_conditions') },
        ],
      };
    },
    computed: {
      currentYear() {
        return new Date().getFullYear();
      },
    },
  };
</script>

Но, если я вместо этого изменю data только с ключомперевода, а затем в моем шаблоне используйте, например, {{ $t('footer.what_is_pinshop') }} загруженный перевод является правильным.Почему это происходит?Я использую beforeEnter охранник маршрутизатора, чтобы изменить перевод.Я следовал этому примеру .

ОБНОВЛЕНИЕ

Если я поставлю links как вычисляемое свойство, перевод будет работать.Так почему же это не происходит только в data свойстве?Я тоже пробовал с this.$i18n.t(), но ничего

1 Ответ

0 голосов
/ 19 января 2019

Это из-за жизненного цикла vue.Вставьте данные link в массив с помощью хука created.Держите вас data (модель) в чистоте и не вызывайте в нем функции.Вы вызываете это до того, как все события и механизмы реактивности когда-либо были зарегистрированы.

жизненный цикл: https://vuejs.org/v2/guide/instance.html

, если вам интересно, как это работает: https://github.com/kazupon/vue-i18n/tree/dev/src

ОБНОВЛЕНИЕ Я просто принял душ и снова подумал об этом.В глубине это из-за механизма реактивности.Вы инициализируете свои данные с помощью функции, и vue не может определить, изменилось ли возвращаемое значение.Посмотрите, как это работает: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty в vue 3 это заменено на https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Proxy

...