Блог

Главная - Вопросы по программированию - nuxt-i18n: ошибка переключателя языка «Объект, возможно, «не определен»

nuxt-i18n: ошибка переключателя языка «Объект, возможно, «не определен»

#typescript #nuxt.js #vue-i18n #nuxt-i18n

#машинописный текст #nuxt.js #vue-i18n #nuxt-i18n

Вопрос:

Я хочу создать переключатель языков в моем приложении nuxt с помощью плагина nuxt-i18n. Важным примечанием является то, что я использую TypeScript вместо JavaScript.

Как указано в документации (https://i18n.nuxtjs.org/lang-switcher ) Я внедрил следующий код в свой компонент Navbar:

TheNavbar.vue

 <template>
  <nav class="navbar">
    <div class="container">
      <div>
        <NuxtLink
          v-for="locale in availableLocales"
          :key="locale.code"
          :to="switchLocalePath(locale.code)">{{ locale.name }}
        </NuxtLink>
      </div>
    </div>
  </nav>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  name: "TheNavbar",
  computed: {
    availableLocales() {
      return this.$i18n.locales.filter(i => i.code !== this.$i18n.locale);
    }
  }
})

В моем приложении это решение работает. Но консоль выводит две следующие ошибки:

  ERROR  ERROR in src/components/shared/TheNavbar.vue:25:14                                                                                                                                                       18:49:05
TS2532: Object is possibly 'undefined'.
    23 |   computed: {
    24 |     async availableLocales() {
  > 25 |       return this.$i18n.locales.filter(i => i?.code !== this.$i18n.locale);
       |              ^^^^^^^^^^^^^^^^^^
    26 |     }
    27 |   }
    28 | })


ERROR in src/components/shared/TheNavbar.vue:25:48
TS2339: Property 'code' does not exist on type 'string | LocaleObject'.
  Property 'code' does not exist on type 'string'.
    23 |   computed: {
    24 |     async availableLocales() {
  > 25 |       return this.$i18n.locales.filter(i => i?.code !== this.$i18n.locale);
       |                                                ^^^^
    26 |     }
    27 |   }
    28 | })

Моя конфигурация i18n в nuxt.config.js:

   i18n: {
    locales: [
      {
        code: 'de',
        name: 'Deutsch',
      },
      {
        code: 'en',
        name: 'English'
      }
    ],
    defaultLocale: 'de',
    vueI18n: {
      fallbackLocale: 'de',
      messages: {
        de: {
          welcome: 'Willkommen'
        },
        en: {
          welcome: 'Welcome'
        }
      }
    }
  },

Ответ №1:

Чтобы избавиться от этих ошибок, добавьте ! оператор выражения после исправления в this.$i18n.locales , потому что это не будет null или undefined , и сообщите typescript, что i это может быть что угодно:

 public get availableLocales(): any {
  return this.$i18n.locales!.filter(i => (i as any).code  !== this.$i18n.locale)
}

Редактировать: 9 апреля ’21

Если вы используете текущую версию Nuxt (v2.15.4), это рабочий код:

 public get availableLocales(): any {
  return ((this.$i18n.locales as (string | number)[])).filter((i: any) => i.code !== this.$i18n.locale)
}

Ответ №2:

Попробуйте это:

 <NuxtLink
   v-if="availableLocales"
   v-for="locale in availableLocales"
   :key="locale.code"
   :to="switchLocalePath(locale.code)">{{ locale.name }}
</NuxtLink>
Метки: , ,