Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

$t is undefined in data attributes

See original GitHub issue

vue & vue-i18n version

vue@2.2.0 vue-i18n@6.0.0-alpha.2

Reproduction Link

http://codepen.io/hanspagel/pen/ryLwyo

Steps to reproduce

Use this.$t in data

What is Expected?

Should return a translated string

What is actually happening?

this.$t is undefined

Issue Analytics

State:
Created 7 years ago
Reactions:3
Comments:11 (1 by maintainers)

Top GitHub Comments

65reactions

kjswallscommented, Aug 7, 2019

@acrolink The reason you’re getting that error is because you’re using an arrow function to return the data object so this isn’t bound correctly when you reference it. This happened to me too! To fix:

data: function () {
    return {
        title: this.$i18n.t('generate_random_choices'),
        choices: null,
        result: null
    };
},

30reactions

kazuponcommented, Mar 5, 2017

Thank you for your reporting!

In data option, You need to use this.$i18n.t(VueI18n instance method). In the Vue lifecycle, data initialization with data option invoke before computed props initialization. In vue-i18n v6 later, $t, $tc and $te are implemented with computed prop of Vue.

I’ll try to write about it as caveats into v6 documentation. 😃

Top Results From Across the Web

Data attribute is returning undefined - javascript - Stack Overflow

I am then trying to pick it up again on another onClick but it comes back as undefined. When I console log $(this).text();...

Data attribute value is undefined. - MSDN - Microsoft

I am trying to pass the controller and corresponding action method on a button click like below but I always get undefined on...

Built-in and Custom Data Attributes - Beginner JavaScript

When you are working with HTML elements, those elements have something called attributes. Attributes are anything provided to an element as additional ...

Data Attributes In JavaScript - Web Dev Simplified Blog

Let's say that we now want to update the value of a data attribute. This is incredibly easy since it works just like...

Function data attribute in child Datatable: "data is undefined"

According to the data option docs it expects the option to be an array. It is not expecting a function. This option can...