代码之家 › 专栏 › 技术社区 › Emile Cantero

vue。js:597[Vue warn]:未定义属性或方法“$t”

vue-i18n vuejs2 vue.js javascript

0

Emile Cantero · 技术社区 · 6 年前

我正在尝试实现vue-i18n Vue-i18n Github 我有一个错误:

vue。js:597[Vue warn]:未定义属性或方法“$t”

我的vuejs 2应用程序工作正常,直到我添加了入门代码,我错在哪里?提前感谢

<div id="app">
  <p>{{ $t("message.hello")}}</p>
</div>

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      products: [
   'Boots',
  ]
   },
  })
</script>
<script>
 // Ready translated locale messages
 const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  ja: {
    message: {
      hello: 'ããã«ã¡ã¯ãä¸ç'
    }
  }
  }

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

  // Create a Vue instance with `i18n` option
  new Vue({ i18n }).$mount('#app')
// Now the app has started!
</script>

1 回复 | 直到 6 年前

1

acdcjunior Mukul Kumar 6 年前

您必须指定 i18n 在任何Vue实例中,您都希望Vue-i18n正常工作。

您拥有的第一个实例没有 i18n 已指定。

此外,您有两个Vue实例,它们不能一起工作,因此您可能只需要一个(带 i18n 已指定)。

<div id="app">
  <p>{{ $t("message.hello")}}</p>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
<script>
  // Ready translated locale messages
  const messages = {
    en: {
      message: {
        hello: 'hello world'
      }
    },
    ja: {
      message: {
        hello: 'ããã«ã¡ã¯ãä¸ç'
      }
    }
  }
  // Create VueI18n instance with options
  const i18n = new VueI18n({
    locale: 'ja', // set locale
    messages, // set locale messages
  })
  // Create a Vue instance with `i18n` option
  const app = new Vue({
    el: '#app',
    i18n, // this is equivalent to `i18n: i18n,` (without quotes, naturally)
    data: {
      products: [
        'Boots',
      ]
    },
  })
  // Now the app has started!
</script>