Forum PHP.pl

Hellouuuuu,


Witam wszystkich.
Potrzebuję odrobiny wskazówek i wyjaśnienia jak to zrobić bo nie rozumiem zupełnie ....
Otóż, mam listę

[HTML] pobierz, plaintext 
 <li v-for="(link, key) in menu" :key="key,index" class="mb-2" ref="link.id" :data="link.parent_id" :class="link.type" :name="link.id" v-model="ItemIndex">
	<a 
		:href="link.url"
		class="text-white tracking-widest"
		@mouseenter="hoverLink(link.image, 'enter'),selectIndex(link.id)"
		@mouseleave="hoverLink(link.image, 'leave'),ItemIndex = null "
	>{{ link.name }}  Parent:{{ link.parent_id }} </a>				
</li>
[HTML] pobierz, plaintext 

Dostaję json'a w którym mam kolejne elementy listy ale niektore są parent a niektore child (jak się domyślacie takie menu).
Podczas iteracji ustawiam klasy, i dodatkowe atrybuty po których chciałbym wybierać jak ma się zachować child kiedy "mousover"/"hover"

a chciałbym żeby jeśli kursor znajduje się nad parentem znajdował child posiadający data = parent name i został pokazany lub schowany.
motam się jak kłębek włóczki i nie moge sobie z tym poradzić.

dla rozjaśnienia:

[HTML] pobierz, plaintext 
<ul class="list-none ml-0 pl-0 relative font-avenir text-white text-xl uppercase leading-relaxed">
	<li name="835" class="mb-2 parent">
		<a href="http://" class="text-white tracking-widest">Gifty Parent: </a>
	</li>
	<li name="836" class="mb-2 parent">
		<a href="http://" class="text-white tracking-widest">Co nowego Parent: </a>
	</li>
	<li data="836" name="837" class="mb-2 child">
		<a href="http://" class="text-white tracking-widest">Odkrywaj Parent:836 </a>
	</li>
	<li name="838" class="mb-2 parent">
		<a href="http://" class="text-white tracking-widest">Eksploruj Parent: </a>
	</li>
	<li name="839" class="mb-2 parent">
		<a href="http://" class="text-white tracking-widest">Stoper Parent: </a>
	</li>
	<li name="840" class="mb-2 parent">
		<a href="http://" class="text-white tracking-widest">Styl  Parent: </a>
	</li>
	<li data="840" name="841" class="mb-2 child">
		<a href="http://" class="text-white tracking-widest">Nowy Parent:840 </a>
	</li>
	<li name="842" class="mb-2 parent">
		<a href="http://" class="text-white tracking-widest">Wizyta Parent: </a>
	</li>
</ul>
[HTML] pobierz, plaintext 

elementy child mają dodatkowy parametr data który pokrywa się z name rodzica.
Nie wiem jak to połaczyć.

Dopiero zacząłem zabawę z Vue, przekopałem mnóstwo stron, wszędzie pokazują to samo ale nie to czego szukam.

Podpowiedzcie, pokażcie.

Pozdrawiam
amator

cokolwiek ?
wskazówka?
nic ... ?

Ten post edytował phpamator 21.03.2022, 22:54:34

https://vuejsdevelopers.com/2017/10/23/vue-...ive-components/

Wystarczy zamienić event na taki co Cie interesuje

Ten post edytował rad11 23.03.2022, 18:57:25

Dzięki za podpowiedz, skutecznie się temu będę przyglądał. Niestety w moim przypadku, ponieważ dostaję dane w bardzo okrojonej formie z których buduję menu to rozwiązanie chyba nie specjalnie będzie dobre.
A może będzie ale narazie tego nie widzę.
Dlaczego ? otóż json który tu włazi nie posiada żadnych informacji na których można by zaczepić parent/child dlatego dorobiłem ale w jsonie sa to poprostu kolejne obiekty z których każdy można powiedzieć jest "parent"

[HTML] pobierz, plaintext 
return [
	'type' => 'parent',           <- dodałem ten
	'id' => $item->db_id,       <- dodałem ten
	'name' => str_replace('\'', '&apos;', $item->title),
	'url' => $item->url,
	'image' => $image ? $image['url'] : null,
	'parent_id' => null       <- dodałem ten 
];
[HTML] pobierz, plaintext 

przy czym dodałem kod który sprawdza czy element posiada ID parenta jeśli nie występuje to przyjmuje typ 'parent'
a jeśli występuje to typ przyjmuje 'child'.
w ten sposób rozpoznaję jaki to będzie element i odpowiednią klasę dodaję do elementu.
Jak pokazałem w poście, struktura listy/menu to

[HTML] pobierz, plaintext 
<ul>
    <li>
        element 1
    </li>
    <li>
        element 2
    </li>
    <li>
        element 3
    </li>
    <li>
        element 4
    </li>
</ul>
[HTML] pobierz, plaintext 

może nic w tym dziwnego czy innego ale jakoś nie bardzo mogłem sobie poradzić.
Moja znajomość Vue jest bardzo słaba,praktycznie dopiero zacząłem to poznawać ale jest szansa że jakoś się powoli nauczę.

Dzisiaj nastąpił przełom i rozwiązałem problem, menu działa, eventy działają, wszystko pięknie, pozostaje jednak jeszcze wzbogacić o niewielką animację bo odkrywanie submenu jest dość "dymaniczne"

Ale chyba jakoś i z tym sobie poradzimy