Witam wszystkich.
Potrzebuję odrobiny wskazówek i wyjaśnienia jak to zrobić bo nie rozumiem zupełnie ....
Otóż, mam listę
<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>
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:
<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"> </li> <li name="836" class="mb-2 parent"> </li> <li data="836" name="837" class="mb-2 child"> </li> <li name="838" class="mb-2 parent"> </li> <li name="839" class="mb-2 parent"> </li> <li name="840" class="mb-2 parent"> </li> <li data="840" name="841" class="mb-2 child"> </li> <li name="842" class="mb-2 parent"> </li> </ul>
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 ... ?