Skip to content
This repository was archived by the owner on Dec 31, 2024. It is now read-only.
This repository was archived by the owner on Dec 31, 2024. It is now read-only.

TypeError: Cannot read property '$i18n' of undefined #259

Description

@lzxb

vue & vue-i18n version

ex: ^2.5.3,^7.3.2

Reproduction Link

Steps to reproduce

  • Error: TypeError: Cannot read property '$i18n' of undefined
export default {
    data () {
        const $t = this.$t;
        return {
            msg: $t('msg')
        };
    }
};
  • Normal
export default {
    data () {
        const $t = this.$t.bind(this);
        return {
            msg: $t('msg')
        };
    }
};

What is Expected?

export default {
    data () {
        const $t = this.$t;
        return {
            msg: $t('msg')
        };
    }
};

What is actually happening?

This Not equal to component instance

/* @flow */

export default function extend (Vue: any): void {
  Vue.prototype.$t = function (key: Path, ...values: any): TranslateResult {
    const i18n = this.$i18n
    return i18n._t(key, i18n.locale, i18n._getMessages(), this, ...values)
  }

  Vue.prototype.$tc = function (key: Path, choice?: number, ...values: any): TranslateResult {
    const i18n = this.$i18n
    return i18n._tc(key, i18n.locale, i18n._getMessages(), this, choice, ...values)
  }

  Vue.prototype.$te = function (key: Path, locale?: Locale): boolean {
    const i18n = this.$i18n
    return i18n._te(key, i18n.locale, i18n._getMessages(), locale)
  }

  Vue.prototype.$d = function (value: number | Date, ...args: any): DateTimeFormatResult {
    return this.$i18n.d(value, ...args)
  }

  Vue.prototype.$n = function (value: number, ...args: any): NumberFormatResult {
    return this.$i18n.n(value, ...args)
  }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions