programing

Vue-i18n Single File Component 구문과 루트 메시지 결합

copysource 2022. 8. 27. 23:30
반응형

Vue-i18n Single File Component 구문과 루트 메시지 결합

Vue용 뛰어난 vue-i18n 플러그인을 시험하고 있습니다.번역을 필요로 하는 템플릿에 직접 삽입할 수 있는 깔끔한 기능을 갖추고 있습니다.단, 사용 시 루트 변환 노드에 액세스할 수 없습니다.이 모델은 지원 대상입니까?아니면 제가 잘못하고 있는 건가요?

main.discloss.main.discloss.

import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
const i18n = new VueI18n({
  locale: 'en',
  messages: {
    en: {
      'company-name': 'billy-bob\'s fine steaks.'
    }
  }
});

Sample.vue

<i18n>
  {
    "en": {
      "title": "@:company-name - yeee hawwww!!!"
    }
  }
</i18n>

<template>
  <div id="app" class="container">
    <site-header :title="$t('title')"></site-header>
  </div>
</template>

i18n 정의는 컴포넌트 내에서 부모 i18n 정의와 자녀 i18n 정의 모두에 액세스할 수 있도록 결합되어 있습니다.자녀 정의는 오버랩이 있는 부모 i18n 정의보다 우선합니다(예를 들어 i18n 정의가 있는 경우).title부모 키와 자식 키, 자식 키가 사용됩니다.)

그러나 사용하고 있는 구문은 확실히 기능하지 않습니다.이 경우 변환된 두 값을 조합한 계산을 정의하여 사용할 수 있습니다.

computed:{
    title(){
        return this.$t("company-name") + this.$t("title")
    }
}

그런 다음 템플릿에서 계산된 값을 사용합니다.

<template>
  <div id="app" class="container">
    <site-header :title="title"></site-header>
  </div>
</template>

언급URL : https://stackoverflow.com/questions/44446205/combining-vue-i18n-single-file-component-syntax-with-root-messages

반응형