vue-i18n: 7.4.2 Cannot read property '_t' of undefined

[Vue warn]: Error in render: "TypeError: Cannot read property '_t' of undefined"

found in

---> <ISelect>
       <Test> at resources/assets/js/views/test.vue
         <Root>
TypeError: Cannot read property '_t' of undefined
    at VueComponent.<anonymous> (app.js:83551)
    at VueComponent.i18nHandler (app.js:53665)
    at VueComponent.t (app.js:53670)
    at VueComponent.t (app.js:49081)
    at VueComponent.boundFn [as t] (app.js:654)
    at VueComponent.localePlaceholder (app.js:51461)
    at Watcher.get (app.js:3577)
    at Watcher.evaluate (app.js:3684)
    at Proxy.computedGetter (app.js:3936)
    at Proxy.render (app.js:71068)

I’ve had the same problem. I have not used the ‘_t’ property .I found that someone also met the same problem. Here are some of my configurations main.js

import iView from 'iview'
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
Vue.locale = () => {};
const messages = {
    zh: Object.assign(require('./lang/zh-cn'), zh),
    en: Object.assign(require('./lang/en-us'), en),
};

const i18n = new VueI18n({
    locale: 'zh', // set locale
    messages // set locale messages
});

const app = new Vue(Vue.util.extend({ router, store, i18n }, App)).$mount('#app');

test.vue

<template>
    <div>
        <Select v-model="global">
            <Option :value="item.id" :key="item.id" v-for="item in country">{{ item.name }}</Option>
        </Select>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                global:'',
                country:this.$t('country'), 
            }
        },
        methods: {
        },
        mounted() {
        },
    }
</script>

When I use iView’s DatePicker and Select tags, it will happen

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 7
Comments: 16

Most upvoted comments

The same here, this package documentation is terrible, examples just don’t work.

+11

vedmant on Aug 17, 2019

The document has been omitted.

iview.i18n((key, value) => i18n.t(key, value))

add this code ,it will be ok

The complete example should be:

Vue.locale = () => {};
    const messages = {
        en: Object.assign({ message: 'hello' }, iview.langs['en-US']),
        zh: Object.assign({ message: '你好' }, iview.langs['zh-CN'])
    };

    const i18n = new VueI18n({
      locale: 'en', // set locale
      messages, // set locale messages
    })

    iview.i18n((key, value) => i18n.t(key, value))

    new Vue({
        el: '#app',
        i18n: i18n,
        data: {
            visible: false,
            date: ''
        },
        methods: {
            show: function () {
                this.visible = true;
            }
        }
    })

+10

qiaochangwei on Mar 8, 2018

after delete this line : Vue.locale = () => {}; it works fine for me

henryffeng on Sep 22, 2020

Still the same error since years…

OzanKurt on Apr 15, 2020

For anyone finding this issue in the future from a search, this page shows the proper solution:

https://lmiller1990.github.io/vue-testing-handbook/mocking-global-objects.html#example-with-vue-i18n

QuestofIranon on Oct 5, 2019

I have the same problem.

import VueI18n from 'vue-i18n';
import Locales from './../../assets/js/vue-i18n-locales.generated.js';

Vue.use(VueI18n, {
    lang: 'en',
    Locales
});

jankulma on Mar 8, 2018

This is still happening with unit testing. Any help with that?

EDIT: Found a working solution: https://github.com/kazupon/vue-i18n/issues/276

Jarzka on Jul 24, 2018

I also had this problem. I found that if you pass the i18n configuration in an extend it won’t work. If you pass it in a new Vue(… it will work

H3xx3n on Mar 13, 2018