VueJS翻译插件
VueJS翻译插件
提问于 2018-06-06 03:08:25
我使用的是javisperez开发的一个名为VueTranslated的插件，我在获取翻译后的文本时遇到了一些困难。
我使用的是全局用法。我有一个包含所有单词及其翻译的文件，如下所示：
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。当翻译后的字符串来自我的组件的脚本标记时，我如何获取它？或者，除了这个插件之外，我还有什么可以尝试的吗？谢谢
回答 3
Stack Overflow用户
发布于 2018-06-06 04:15:29
不要使用箭头函数返回数据，请使用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>
Stack Overflow用户
发布于 2018-06-11 22:54:10
我只需要像这样使用this.t('message')：
<script>
export default {
data {
return {
message: this.t('message')
}
}
}
</script>Stack Overflow用户
发布于 2018-08-21 18:21:21
应该像这样用'$‘来纠正它，
export default {
data {
return {
message: this.$t('message')
}
}}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50707307
复制相关文章
相似问题