javascript - VueJS 翻译插件

Question

我正在使用一个名为 VueTranslated 的插件，由 javisperez 制作，我在获取翻译文本时遇到了一些困难。

我正在使用全局用法。我有一个包含所有单词及其翻译的文件，例如:

import Vue from 'vue'
import VueTranslate from 'vue-translate-plugin'
Vue.use(VueTranslate)

Vue.locales({
  'pt_BR': {
    'hello-world': 'Olá mundo'
  },
  'en_US': {
    'hello-world': 'Hello world'
  }
})

导出默认值()

所以，当我在任何组件中时，我可以使用类似这样的方式获取单词:

<template>
<div>
    <p> {{t('hello-world)}} </p>
</div>
</template>

然后，p 标签根据我的语言设置向我显示字符串 Hello world 或 Olá mundo。 但是如果我在这个组件中有类似

<template>
<div>
    <p> {{message}}
</div>
</template>

<script>
    export default {
        data: () => ({
            message: this.$translate.text('hello-world)
        })
    }
</script>

它只是出现在我的 p 标签中的 hello-world 中。 当它来 self 的组件的脚本标签时，我怎样才能得到一个翻译后的字符串？ 或者，除了这个插件，我还有什么可以尝试的吗？ 谢谢

Answer 1

不要使用箭头函数返回数据并使用 locale 属性而不是 text:

new Vue({
  el: "#app",
  data() {
    return {
      message: this.$translate.locale['hello-world']
    }
  },
  beforeCreate() {
    this.$translate.setLang('pt_BR')
  },
  locales: {
    pt_BR: {
      'hello-world': 'Olá mundo'
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-translate-plugin@1.2.0/dist/vue-translate.common.min.js"></script>
<div id="app">
  <p> {{ message }} </p>
</div>