kazupon / vue-i18n

:globe_with_meridians: Internationalization plugin for Vue.js

Home Page:https://kazupon.github.io/vue-i18n/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

vue3.0 怎么使用i18n组件插值的方法?

Abbylily opened this issue · comments

想要在messages里面插入html标签 使用组件插值

Reporting a bug?
runtime-core.esm-bundler.js:6870 [Vue warn]: Failed to resolve component: i18n at

vue2写法

<div id="app">
  <i18n path="term" tag="label" for="tos">
    <a :href="url" target="_blank">{{ $t('tos') }}</a>
  </i18n>
</div>

const messages = {
  en: {
    tos: 'Term of Service',
    term: 'I accept xxx {0}.'
  },
  ja: {
    tos: '利用規約',
    term: '私は xxx の{0}に同意します。'
  }
}

const i18n = new VueI18n({
  locale: 'en',
  messages
})
new Vue({
  i18n,
  data: {
    url: '/term'
  }
}).$mount('#app')

在vue3.0的项目中 直接使用标签会报错 并不能被转义成对应的html

Module versions (please complete the following information):

  • vue: ^3.2.6
  • vue-i18n: ^9.1.7

Regarding Vue 3.x, please refer and report issues to https://github.com/intlify/vue-i18n-next