如何在组件的脚本部分使用vue-i18 n translate函数

emeijp43  于 2023-05-29  发布在  Vue.js
关注(0)|答案(4)|浏览(275)

我使用laravel-vue-i18 n-generator包在我的laravel项目中处理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”
我哪里做错了?

wfsdck30

wfsdck301#

这在组件的脚本部分中对我有效:

this.$t('message')
m0rkklqb

m0rkklqb2#

在vue.js中,如果你得到一个错误,比如

"_vm.translate不是一个函数”很可能是您没有导入包含translate方法的i18 n包,当您尝试使用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>
rn0zuynd

rn0zuynd3#

这对我很有效
我有一个locales文件夹,其中包含index.js导入我使用的两个语言文件,在此文件中添加。

global.$t = Vue.t

在脚本部分中直接引用为

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

cwtwac6a4#

我刚刚遇到了一个类似的问题,我无法获得i18n.js的值。我的设置是一个带有createI18n函数的i18n.js文件,我在其中输入一些消息:

import { createI18n } from "vue-i18n";

const i18n = createI18n({
    locale: "en",
    messages:{
        en:{
            // LOGIN //
            signIn: "Sign in",

        },
    }
});

export default i18n;

在我的main.js中,我导入文件并使用它(app.use(i18n))

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import store from './store'
import i18n from './locales/i18n'

window.$store = store

const app = createApp(App)

app.use(router)
app.use(i18n)
app.use(store)

app.mount('#app')

在组件内部,我也导入了文件。然后我用i18n.global.t('keyname ')调用这些值

import { onMounted, ref } from 'vue'
import i18n from '../locales/i18n'

export default {
    name: 'WebRTC',
    setup(){
    console.log(i18n.global.t('incomingCall'))
    }
}

相关问题