Отображение текста вкладок при использовании Vue3 component :is

Question

во Vue3 при использовании условного рендера компонентов component: is во вкладке отображается имя компонента. Пару недель бьюсь над тем, чтобы добиться отображения во вкладке нужного мне текста...

Стандартный пример использования

опираясь на данный пример - нужно чтобы, например, вкладка "Home" отображалась как "Домашняя"

единственный вариант, который я нашёл - это в дочернем компоненте

<script>
export default {
  name: "Домашняя",
}
</script>

и принимать в родительском компоненте по этому имени. работает. НО! 1. Лид говорит, что использовать имя компонента не должно задействоваться для отображения контента 2. если для передачи currentTab используется vuex (вкладки в одном компоненте, компоненты в другом) то ничего не работает..

пс. просьба сильно не бить, обучаюсь фронтенду только полтора месяца)

Answer 1

Расширьте массив строк, до массива объектов

  [
    {
      key: 'Home',
      title: 'Домашняя',
    },
    {
      key: 'Posts',
      title: 'Статьи',
    },
    {
      key: 'Archive',
      title: 'Архив',
    },
  ]

И используйте как объект, например:

  {{ tab.title }}

  <component :is="currentTab" class="tab.key" />

Ну и имейте ввиду что тепереь это объекты и учтите это во всей логике

P.S. Не учу что правильно, а что нет, это как одно из решений для вашей задачи

БЛОГ НА HUSL

Отображение текста вкладок при использовании Vue3 component :is

Ответы (1 шт):