Nuxt i18n resets data object on language switch

user_5753163 0
Viewed 572

I've been integrating nuxt-i18n into one of my projects to enable multiple languages. It all works fine, but when I switch language while filling in a form, all data from the page is lost.

So, I created a form and use v-model to bind the data to the page's data object. 

<div class="form-group">
   <label for="username">{{ $t('form.username') }}</label>
   <input v-model="user.username" type="username" class="form-control" id="username" />
</div>

This is the page's data object

data: () => {
  return {
     user: {
       username: ''
    }
}

So when I type a username in the field, the model is updated, as I expect. But as soon as I switch the language from that page, the data is lost as soon as the chosen language has been set.

This is how I switch the language when clicking, for example, the dutch flag icon.

switchLocalePath(locale.code) // local.code is 'nl' in this case

When the user switches the language, the slug should also update. The code below shows the settings for the i18n package in my nuxt.config.js file.

modules: [
    ['nuxt-i18n', {
      locales: [
        {
          code: 'en',
          iso: 'en-US',
          name: 'English'
        },
        {
          code: 'nl',
          iso: 'nl-NL',
          name: 'Nederlands'
        }
      ],
      defaultLocale: 'nl',
      parsePages: false,
      pages: {
        'account/register': {
            en: '/account/register',
            nl: '/account/registreren'
        },
        'account/index': {
            en: '/account/login',
            nl: '/account/inloggen'
        }
      },
      vueI18n: {
        fallbackLocale: 'nl',
        messages: { nl, en }
      }
    }],
]

The actual question

So almost everything works just as I expect. But every time I change the language, the page's data object is cleared (It doesn't seem like the page actually reloads). So when filling in a form, then changing the language before submitting, all data is lost.

How can I make sure, if possible, that all data presists when toggling the language?

Thanks in advance!

nuxt.js vue.js internationalization javascript
1 Answers

I use this method to change the locale and the same behavior occurs.

<v-list>
    <v-list-item
        v-for="locale in availableLocales"
        :key="locale.code"
        @click="$router.push(switchLocalePath(locale.code))"
    >
        <v-list-item-title>{{ locale.name }}</v-list-item-title>
    </v-list-item>
</v-list>

Also tried using $i18n.setLocale(locale.code) same thing happens.

Not sure if this should be a comment but since I can't comment yet (requires 50 rep), I post this as an extension of the description of the problem.

user_153241070
Related