Recently, I incorporated nuxt-i18n into a project to support multiple languages. Everything was running smoothly until I encountered an issue where switching language while filling out a form resulted in all data on the page being lost.
To tackle this problem, I created a form and utilized v-model to connect the data with 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 represents the page's data object:
data: () => {
return {
user: {
username: ''
}
}
Upon typing a username in the field, the model gets updated as expected. However, upon changing the language on the page, the data is reset once the new language selection is made.
To change the language, such as clicking on the Dutch flag icon, I utilize the following code snippet:
switchLocalePath(locale.code) // local.code is 'nl' in this case
Whenever there is a language switch, the slug should update correspondingly. The code below illustrates the configurations for the i18n package within 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 precise query
Most features are functioning just as intended. However, each time I switch the language, the page's data object seems to be cleared (without a visible page reload). Consequently, when I am in the middle of filling out a form and then alter the language before submission, all entered data is erased.
Is there a way, if possible, to ensure that all data persists even when toggling the language?
Appreciate your insights!