如何在组件的脚本部分使用 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 翻译功能的主要内容,如果未能解决你的问题,请参考以下文章

前端使用vue-i18n做中英文翻译

Vue 国际化之 vue-i18n 的使用

Vue:vue-i18n:无法翻译 keypath 的值,使用 keypath 的值作为默认值

Vue国际化处理 vue-i18n 以及项目自动切换中英文

vue项目国际化(使用vue-i18n)

vue项目中使用vue-i18n国际化