Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> Vue3 jak pokazać element on-hover na innym?
phpamator
post 22.03.2022, 08:58:07
Post #1





Grupa: Zarejestrowani
Postów: 321
Pomógł: 3
Dołączył: 10.07.2016
Skąd: UK-raine

Ostrzeżenie: (0%)
-----


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 ... ?

Ten post edytował phpamator 21.03.2022, 22:54:34
Go to the top of the page
+Quote Post
rad11
post 23.03.2022, 18:55:59
Post #2





Grupa: Zarejestrowani
Postów: 1 270
Pomógł: 184
Dołączył: 7.10.2012
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


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
Go to the top of the page
+Quote Post
phpamator
post 23.03.2022, 21:29:43
Post #3





Grupa: Zarejestrowani
Postów: 321
Pomógł: 3
Dołączył: 10.07.2016
Skąd: UK-raine

Ostrzeżenie: (0%)
-----


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
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 29.03.2024 - 09:30