Древовидное меню. Как сделать древовидное меню, с раскрытыми подразделами на активном пункте?

Question

[Soer44]

expanded: true - не работает даже хардкодом. В чём причина не знаю.
Нужно чтобы при нажатии на пункт меню в котором есть вложенные пункты они сразу отображались. Сейчас primevue подставляет треугольник, на который надо нажать чтобы отобразились подпункты, это жутко неудобно..

<template>
		<Tree :value="nodes" class="mw-[300px] bg-white transition-all relative">
			<template #default="slotProps">
				<b>{{ slotProps.node.label }}</b>
			</template>
			<template #url="slotProps">
				<a :href="slotProps.node.data">{{ slotProps.node.label }}</a>
			</template>
		</Tree>

</template>

<script lang="ts" setup>
import Tree from 'primevue/tree';
import { ref } from 'vue';


const nodes = ref([
	{
		label: 'Меню',
		data: '/admin',
		type: 'url',

	},
	{
		key: '0',
		label: 'Маркетинговые акции',
		data: '/promotions',
		type: 'url',
		expanded: true,
		children: [
			{ key: '0-0', label: 'Промокоды', data: '/promocodes', type: 'url' },
			{ key: '0-1', label: 'Скидки', data: '/discounts', type: 'url' },
		]
	},
	{
		key: '1',
		label: 'Книги',
		data: '/books',
		type: 'url',
		children: [
			{ key: '1-0', label: 'Авторы', data: '#', type: 'url' },
			{ key: '1-1', label: 'Серии', data: '#', type: 'url' },
		]
	}
]);

</script>

Answer 1

[Soer44]

Верный ответ на вопрос.
Надо было тег а заменить на накст-линк. И всё заработало нормально.
функция toggleNode позволяет открывать дерево по клику на заголовок. Ну типа чтобы не целиться по встроенной в плагин tree кнопке.

<template>
	<keep-alive>
	<Tree
	v-model:expandedKeys="expandedKeys"
  @nodeSelect="toggleNode"
  selectionMode="single"
	:value="nodes" 
		 class="mw-[300px] bg-white transition-all relative">
		<template #default="slotProps">
			<b>{{ slotProps.node.label }}</b>
		</template>
		<template #url="slotProps">
			<nuxt-link :href="slotProps.node.data">{{ slotProps.node.label }}</nuxt-link>
		</template>
	</Tree>
	</keep-alive>

</template>

<script lang="ts" setup>
import Tree from 'primevue/tree';
import { ref } from 'vue';


const nodes = ref([
	{
		label: 'Меню',
	},
	{
		key: '0',
		label: 'Маркетинговые акции',
		children: [
			{ key: '0-0', label: 'Промоакции', data: '/promotions', type: 'url' },
			{ key: '0-1', label: 'Промокоды', data: '/promocodes', type: 'url' },
			{ key: '0-2', label: 'Скидки', data: '/discounts', type: 'url' },
		]
	},
	{
		key: '1',
		label: 'Книги',
		children: [
			{ key: '1-0', label: 'Книги', data: '/books', type: 'url' },
			{ key: '1-1', label: 'Авторы', data: '#', type: 'url' },
			{ key: '1-2', label: 'Серии', data: '#', type: 'url' },
		]
	}
]);

const expandedKeys = ref({});

function toggleNode({ children, key }) {
	if (children) {
		expandedKeys.value[key] = !expandedKeys.value[key];
	}
}



</script>