Vue - 单文件组件中的翻译 [英] Vue - Translation in single file component

问题描述

我使用 vue-i18n 进行翻译，效果很好！但是当我在单个文件组件的 data 函数中使用 this.$t() 函数时，翻译不起作用.

I'm using vue-i18n for my translations and it works great! But when I'm using the this.$t() function inside the data function of a single file component the translation is not working.

 <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 路由器防护来更改翻译.我关注了这个例子.

But, if I instead change data with only the key of translation and then in my template use e.g {{ $t('footer.what_is_pinshop') }} the translation loaded is correct. Why does this happen? I'm using the beforeEnter router guard to change the translation. I have followed this example.

更新

如果我将 links 作为计算属性，则翻译有效.那么为什么它不仅仅发生在 data 属性中呢?我也试过 this.$i18n.t()，但没有

If I put links as a computed property the translation works. So why it does not happen only in data property? I also tried with this.$i18n.t(), but nothing

推荐答案

这是因为 vue 的生命周期.使用 created 钩子将 link 数据推送到数组中.保持 data(model) 干净，不要在其中调用函数.您在注册所有事件和反应机制之前调用它.

This is, because of the vue lifecycle. Push your link data into the array by using the created hook. Keep you data(model) clean and do not call functions in it. You call this up before all events and reactivity mechanisms have ever been registered.

生命周期:https://vuejs.org/v2/guide/instance.html

如果你对它的工作原理感兴趣:https://github.com/kazupon/vue-i18n/tree/dev/src

if you're interested how it works: 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

UPDATE I just showered and thought again about it. In depth this is because of the reactivity mechanism. You initialize your data with a function and vue cannot detect if the returned value has changed. See how it works: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty in vue 3 this is replaced by https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Proxy

这篇关于Vue - 单文件组件中的翻译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！