Vue-i18n: Data attributes are not updated when switching language in nuxt

[netkof]

# vue & vue-i18n version

"nuxt": "1.3.0"
"vue":"2.5.13"
"vue-i18n": "7.4.2"

Hi, I see a problem when switching language and using this.$i18n.t("message") inside the data object/function using nuxt.

Steps to reproduce

This is happening only when using components and the component is loaded in the layout of the page. If I put the component whitin the page file itself the problem dissapear.

I don't know if there is an issue of nuxt, vue-i18n or something about vue.

this is the layout I use,

```

Toolbar component data:

data() {
return {
links: [
{ title: this.$i18n.t('toolbar.about'), to: 'about' },
]
}
}
```

Here is the link I use to switch the language
<nuxt-link flat v-if="$i18n.locale === 'es'" :to="`/en` + $route.fullPath" active-class="none" class="lang" exact>EN </nuxt-link>

The problem is also not occurring if I use the $t('message') function directly in the html elements, only when use the data attributes to populate the links.

What is Expected?

data attributes to be translated on language switching

What is actually happening?

The problem is that the data attributes doesn't get translated/refreshed.

Reproduction Link

Sorry for not attach a codepen, but I don't know how to include nuxt in there.

[kazupon]

This is not a problem of vue-i18n.
data function is eval once only, when Vue Component initialize.
For this reason, even if you switch locale, Again the data function is not evaluated.

[manelmendez]

I have the same problem. I understand that is not a vue-i18n problem @kazupon ,but do you know how to make it works with computed properties?

[bsanchezb]

Also interested in the solution. Template references are updating just fine, but the data properties, in particular mixins, do not update. In the result I have a part of the website is updated, that does not seem well.

[agcty]

I have the exact same problem! Any updates?

[agcty]

OK the solution is really easy: For example I had a Navbar which iterated over a list of items which were defined in the data function like this:

data() {
    return {
      navItems: [
        { id: 1, text: this.$t("house.house"), link: "/" },
        { id: 2, text: this.$t("forum.forum"), link: "/forum" },
        { id: 3, text: this.$t("poll.polls"), link: "/vote" },
        {
          id: 4,
          text: this.$t("blackboard.blackboard"),
          link: "/blackboard"
        },
        {
          id: 6,
          text: this.$t("issue.reportIssue"),
          link: "/issues"
        }
      ];
    }
}

I literally just moved it to a computed property:

computed: {
navItems() {
      return [
        { id: 1, text: this.$t("house.house"), link: "/" },
        { id: 2, text: this.$t("forum.forum"), link: "/forum" },
        { id: 3, text: this.$t("poll.polls"), link: "/vote" },
        {
          id: 4,
          text: this.$t("blackboard.blackboard"),
          link: "/blackboard"
        },
        {
          id: 6,
          text: this.$t("issue.reportIssue"),
          link: "/issues"
        }
      ];
    }
}

[bakhti-uzb]

@agcty Thank you, Worked for me

[ryansegus]

Hi, @agcty your solution also worked for me but I also came with this solution.. maybe somebody else can use it too, I used the key directly in the array and on the template I call $t('MyKeyFromArray'), es:

```
// On template
{{ $t(menuItem.name) }}

// My data Return
data() {
return {
mainMenu: [
{
name: "MainMenu.Portfolio",
link: "projects",
icon: "portfolio"
},
{
name: "MainMenu.Infographics",
link: "infographics",
icon: "info"
},
{
name: "MainMenu.Contact",
link: "contact",
icon: "contact"
}
]
};
},

// My it.json looks like this, or you can use tags inside vue
{
"MainMenu": {
"Contact": "Contattami",
"Infographics": "Infografica",
"Portfolio": "Portfoglio"
}
}
````

I am not sure which way has better for performance, cheers!

[juansinmiedos]

Hi, @agcty your solution also worked for me but I also came with this solution.. maybe somebody else can use it too, I used the key directly in the array and on the template I call $t('MyKeyFromArray'), es:

// On template
<span class="c-menu__linkLabel">{{ $t(menuItem.name) }}</span>

// My data Return
data() {
    return {
      mainMenu: [
        {
          name: "MainMenu.Portfolio",
          link: "projects",
          icon: "portfolio"
        },
        {
          name: "MainMenu.Infographics",
          link: "infographics",
          icon: "info"
        },
        {
          name: "MainMenu.Contact",
          link: "contact",
          icon: "contact"
        }
      ]
    };
  },

// My it.json looks like this, or you can use <i18n> tags inside vue
{
  "MainMenu": {
    "Contact": "Contattami",
    "Infographics": "Infografica",
    "Portfolio": "Portfoglio"
  }
}

I am not sure which way has better for performance, cheers!

This was specially useful when I was printing a series of checkboxes with v-for and the array had objects with properties "value" (true or false, had to be toggled by the user) and "label" (a static string)

[limmie]

Thanks guys. 1 hour of searching))