Задать вопрос

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

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

<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? Куда прописывать и как менять его?
  • Вопрос задан
  • 162 просмотра
Подписаться 1 Простой 2 комментария
Решения вопроса 1
Lastor
@Lastor
В чем сила, брат? В ньютонах.
Если это учебное задание, то оно из двух разных не связанных тем.
Куда прописывать @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>
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы