如何在组件的脚本部分使用vue-i18n翻译功能

Question

我在我的 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'

我哪里出错了？

Answer 1

这对我有用。

我有一个 locales 文件夹，其中 index.js 导入了我正在使用的两个语言文件，在此文件中添加。

global.$t = Vue.t

在脚本部分直接引用为

return $t('backend.faq.main')

Answer 2

您必须将 'i18n' 导入您的组件。

<script>
import i18n from '@/i18n'

{
...
 data: () => {
  return {
   message: i18n.t('message'),
  }
 }
...
}
</script>

Answer 3

这在组件的脚本部分对我有用：

this.$t('message')

Answer 4

在 vue.js 中，如果您遇到类似

的错误

"_vm.translate is not a function" It is most probably that you havent import the i18n package which contains translate method.This error occures sometimes when you try to add translate using v-bind to html attributes. Example:

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

如何在组件的脚本部分使用vue-i18n翻译功能

How to use vue-i18n translate function in script part of component

laravel

vue.js

vue-i18n