Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Vue3 jak pokazać element on-hover na innym?
Forum PHP.pl > Forum > Po stronie przeglądarki
phpamator
Hellouuuuu,


Witam wszystkich.
Potrzebuję odrobiny wskazówek i wyjaśnienia jak to zrobić bo nie rozumiem zupełnie ....
Otóż, mam listę
  1. <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">
  2. <a
  3. :href="link.url"
  4. class="text-white tracking-widest"
  5. @mouseenter="hoverLink(link.image, 'enter'),selectIndex(link.id)"
  6. @mouseleave="hoverLink(link.image, 'leave'),ItemIndex = null "
  7. >{{ link.name }} Parent:{{ link.parent_id }} </a>
  8. </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:
  1. <ul class="list-none ml-0 pl-0 relative font-avenir text-white text-xl uppercase leading-relaxed">
  2. <li name="835" class="mb-2 parent">
  3. <a href="http://" class="text-white tracking-widest">Gifty Parent: </a>
  4. </li>
  5. <li name="836" class="mb-2 parent">
  6. <a href="http://" class="text-white tracking-widest">Co nowego Parent: </a>
  7. </li>
  8. <li data="836" name="837" class="mb-2 child">
  9. <a href="http://" class="text-white tracking-widest">Odkrywaj Parent:836 </a>
  10. </li>
  11. <li name="838" class="mb-2 parent">
  12. <a href="http://" class="text-white tracking-widest">Eksploruj Parent: </a>
  13. </li>
  14. <li name="839" class="mb-2 parent">
  15. <a href="http://" class="text-white tracking-widest">Stoper Parent: </a>
  16. </li>
  17. <li name="840" class="mb-2 parent">
  18. <a href="http://" class="text-white tracking-widest">Styl Parent: </a>
  19. </li>
  20. <li data="840" name="841" class="mb-2 child">
  21. <a href="http://" class="text-white tracking-widest">Nowy Parent:840 </a>
  22. </li>
  23. <li name="842" class="mb-2 parent">
  24. <a href="http://" class="text-white tracking-widest">Wizyta Parent: </a>
  25. </li>
  26. </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 ... ?
rad11
https://vuejsdevelopers.com/2017/10/23/vue-...ive-components/

Wystarczy zamienić event na taki co Cie interesuje
phpamator
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" tongue.gif
  1. return [
  2. 'type' => 'parent', <- dodałem ten
  3. 'id' => $item->db_id, <- dodałem ten
  4. 'name' => str_replace('\'', '&apos;', $item->title),
  5. 'url' => $item->url,
  6. 'image' => $image ? $image['url'] : null,
  7. 'parent_id' => null <- dodałem ten
  8. ];

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
  1. <ul>
  2. <li>
  3. element 1
  4. </li>
  5. <li>
  6. element 2
  7. </li>
  8. <li>
  9. element 3
  10. </li>
  11. <li>
  12. element 4
  13. </li>
  14. </ul>

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 tongue.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.