Nuxt i18n 在语言切换时重置数据对象答案

【问题标题】：Nuxt i18n resets data object on language switchNuxt i18n 在语言切换时重置数据对象
【发布时间】：2020-06-20 21:51:46
【问题描述】：

我一直在将nuxt-i18n 集成到我的一个项目中以启用多种语言。一切正常，但是当我在填写表单时切换语言时，页面中的所有数据都会丢失。

所以，我创建了一个表单并使用v-model 将数据绑定到页面的数据对象。

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

这是页面的数据对象

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

因此，当我在字段中输入用户名时，模型会按照我的预期进行更新。但是，一旦我从该页面切换语言，一旦设置了所选语言，数据就会丢失。

这就是我在单击例如荷兰国旗图标时切换语言的方式。

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

当用户切换语言时，slug 也应该更新。下面的代码显示了我的nuxt.config.js 文件中i18n 包的设置。

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 }
      }
    }],
]

实际问题

所以几乎一切都按我的预期工作。但是每次我更改语言时，页面的数据对象都会被清除（看起来页面实际上并没有重新加载）。因此，当填写表单，然后在提交前更改语言时，所有数据都会丢失。

如果可能，我如何确保在切换语言时所有数据都保持不变？

提前致谢！

【问题讨论】：

标签： javascript vue.js internationalization nuxt.js

【解决方案1】：

我使用这种方法来更改语言环境并发生相同的行为。

<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>

也尝试使用$i18n.setLocale(locale.code) 发生同样的事情。

不确定这是否应该是评论，但由于我还不能评论（需要 50 个代表），我将其发布为问题描述的扩展。

【讨论】：