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'
  }
})

export default（）

所以，当我在任何组件中时，我可以使用类似的东西来获取单词：

<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>

它只在hello-world标记中显示p。如何从我的组件的脚本标记中获取已翻译的字符串？或者，我还有什么可以尝试而不是这个插件吗？感谢

Answer 1

应使用'$'对此进行更正，

export default {
data {
    return {
        message: this.$t('message')
    }
}

}

Answer 2

请勿使用箭头功能返回您的数据并使用locale属性而不是text：

＆＃13;

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'
    }
  }
})

＆＃13;

<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>

＆＃13;

Answer 3

我只需要使用this.t('message')，如：

<script>

export default {
    data {
        return {
            message: this.t('message')
        }
    }
}

</script>

VueJS翻译插件

3 个答案: