Как правильно рендерить контент?

Question

[Полина Титова]

Меню в компоненте с контентом:

<div class="px-3 py-3 mt-2">
    <div class="flex items-stretch w-full bg-gray-200 h-auto rounded-lg px-0.5 py-0.5">
      <MenuSection :name="menu.item1.name" :label="menu.item1.label" extraClass="rounded-lg" defaultClass="my-1.5 border-transparent" />
      <MenuSection :name="menu.item2.name" :label="menu.item2.label" defaultClass="my-1.5 border-transparent border-x-gray-300" />
      <MenuSection :name="menu.item3.name" :label="menu.item3.label" extraClass="rounded-lg" defaultClass="my-1.5 border-transparent" />
    </div>
  </div>

MenuSection:

<button type="submit" class="flex justify-center w-full bg-gray-200" :class="extraClass">
    <p class="no-underline text-gray-800">{{ item.label }}</a>
</button>

При нажатии на определённый элемент меню, должно отображаться определённый контент (активный первый элемент - выводиться контент первого, второй - второй).

Как такое реализовать?
Куда прописывать @click?
Нужно ли дополнительное свойство active? Куда прописывать и как менять его?

Comments

[Aetae]

Можно сделать компонент Menu который всегда работает с MenuSection и тогда сверху делаешь privide, внизу inject и работаешь как будто это один компонент.

Иначе - как хочешь и как удобно. Вопрос слишком мутный.

[0xD34F]

Отвечал на этот вопрос неоднократно.

Answer 1

[SymphoGraph]

Если это учебное задание, то оно из двух разных не связанных тем.

Куда прописывать @click?

Тем элементам меню, от которых вы хотите реакции от клика.

При нажатии на определённый элемент меню, должно отображаться определённый контент

В простом случае достаточно, чтобы в коде были все элементы, возможные для отображения. К каждому из них добавляйте условие при котором он должен отображаться.
Например:

spoiler

<template>
<MenuSection @click="selectedEl = 1"></MenuSection>
<MenuSection @click="selectedEl = 2"></MenuSection>
<div v-if="selectedEl  === 1"></div>
<div v-if="selectedEl  === 2"></div>
</template>
<script setup>
const selectedEl  = ref(0)
</script>

Нужно ли дополнительное свойство active? куда прописывать и как менять его?

Это не свойство. Это класс, который можно применить по условию.
Напрмер:

spoiler

:class="selectedEl !== 1 ? 'extraClass' : 'extraClass' + ' active'"
<style>
.active {
color: red;
}
</style>