programing

vue i18n - javascript 오브젝트로 사용(템플릿 내가 아님)

goodsources 2022. 8. 27. 10:24
반응형

vue i18n - javascript 오브젝트로 사용(템플릿 내가 아님)

vue, vue-i18n을 javascript(개체로서)만으로 사용할 수 있고 템플릿에서는 사용할 수 없습니까?

window.confirm 같은 곳에서 사용하고 싶은데 가능한가요?

고마워요.

네, 가능합니다. 저는 플러그인을 사용한 적이 없습니다만, 매우 간단해 보입니다.

먼저 인스턴스를 만듭니다.

// Ready translated locale messages
const messages = {
  en: {
    message: {
      greeting: 'hi {name}'
    }
  },
  es: {
    message: {
      greeting: 'hola {name}'
    }
  }
}

// Create VueI18n instance with options
const i18n = new VueI18n({
  locale: 'es', // set locale
  messages, // set locale messages
})

('const'는 es6임을 유의하십시오.)

그런 다음 i18n var가 존재하는 임의의 js에서 사용할 수 있습니다.

i18n.t('greeting', { name: 'kazupon' }) // -> hola kazupon

문서:

http://kazupon.github.io/vue-i18n/en/started.html

http://kazupon.github.io/vue-i18n/en/migrations.html

버전 6.x 이후의 컴포넌트 내부 사용:

mounted() {
    this.$i18n.t('path', 'en', { foo: 'bar' })
}

아니면

mounted() {
    this.$t('path', 'en', { foo: 'bar' })
}

버전 5.x의 경우:

mounted() {
    Vue.t('path', 'en', { foo: 'bar' })
}

출처 : https://github.com/kazupon/vue-i18n/issues/149#issuecomment-300096155

예, 18n 값을 가져올 필요가 있는 i18n.js 구성 파일을 Import합니다(i18n With Vue.js 프로젝트를 구성한 위치).

import i18n from '@/plugins/i18n'

@를 사용하여 루트로부터의 경로를 가져옵니다.

그리고나서

값을 부가하다

i18n.t('salesOrder'),

언급URL : https://stackoverflow.com/questions/43448071/vue-i18n-using-it-as-a-javascript-object-not-inside-the-template

반응형