如何在组件的脚本部分使用 vue-i18n 翻译功能
Posted
技术标签:
【中文标题】如何在组件的脚本部分使用 vue-i18n 翻译功能【英文标题】:How to use vue-i18n translate function in script part of component 【发布时间】:2019-10-14 18:32:07 【问题描述】:我在我的 laravel 项目中使用 laravel-vue-i18n-generator 包来处理 vuejs 组件中的文本翻译。我已经设置了 app.js,如下所示:
import VueInternationalization from 'vue-i18n';
import Locale from './vue-i18n-locales.generated';
Vue.use(VueInternationalization);
const lang = 'fa';
const i18n = new VueInternationalization(
locale: lang,
messages: Locale
);
const app = new Vue(
el: '#app',
i18n,
);
在组件中:
<template>
<a href="#" class="tip" title="" :title="$t('component.delete.title')" @click.prevent="deleteAction">
<i :class="icon"></i>
</a>
</template>
<script>
import swal from 'sweetalert';
import axios from 'axios';
export default
inject: ['$i18n'],
props:
endpoint:
type: String,
required: true,
,
icon:
type: String,
default: 'fa fa-trash'
,
message:
type: String,
default: this.$i18n.t('component.delete.are_you_sure'),
,
confirm:
type: String,
default: this.$i18n.t('component.delete.confirm'),
,
cancel:
type: String,
default: this.$i18n.t('component.delete.cancel'),
,
success:
type: String,
default: this.$i18n.t('component.delete.success'),
,
failed:
type: String,
default: this.$i18n.t('component.delete.failed'),
,
,
mounted()
console.log(this);
,
methods:
deleteAction()
const vm = this;
swal(
text: this.message,
buttons:
catch:
text: this.confirm,
value: "delete",
,
cancel: this.cancel
,
dangerMode: true
).then(name =>
if (!name) return false;
axios.delete(vm.endpoint)
.then(function (response)
swal( vm.$i18n.t('component.delete.congrats'),vm.success, 'success').then(() =>
location.reload();
);
)
.catch(function (error)
swal( vm.$i18n.t('component.delete.error'), vm.failed, 'error');
);
);
</script>
<style scoped>
</style>
幸运的是$t('component.delete.title')
在模板部分可以正常工作,但在脚本部分,我遇到了这个错误:
未捕获的类型错误:无法读取未定义的属性“t”
我哪里出错了?
【问题讨论】:
【参考方案1】:这在组件的脚本部分对我有用:
this.$t('message')
【讨论】:
【参考方案2】:在 vue.js 中,如果你遇到类似
的错误“_vm.translate 不是函数” 很可能是您没有导入包含 translate 方法的 i18n 包。当您尝试使用 v-bind 将 translate 添加到 html 属性时,有时会发生此错误。 示例:
<a-form-item class="mb-0" :label="`$translate('person_name.firstname')`">
以下步骤可以解决错误。
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
<script lang="ts">
import translate, i18n from '@/i18n';
@Component(
components:
AgIconBase
,
methods:
translate
)
</script>
【讨论】:
【参考方案3】:这对我有用。
我有一个带有 index.js 的 locales 文件夹,用于导入我正在使用的两个语言文件, 在这个文件中添加。
global.$t = Vue.t
在脚本部分直接引用为
return $t('backend.faq.main')
【讨论】:
【参考方案4】:您必须将“i18n”导入到您的组件中。
<script>
import i18n from '@/i18n'
...
data: () =>
return
message: i18n.t('message'),
...
</script>
【讨论】:
以上是关于如何在组件的脚本部分使用 vue-i18n 翻译功能的主要内容,如果未能解决你的问题,请参考以下文章