• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Vue.js v-for wartość w danym rekordzie pobrana z input

Hosting forpsi easy 1 pln
0 głosów
154 wizyt
pytanie zadane 17 marca 2021 w JavaScript przez mi-20 Stary wyjadacz (13,140 p.)

Cześć,

mam pytanie jak w Vue.js "uzyskać" wartość z input w pętli, oczywiście inną w każdym rekordzie. Założenie cena * ilość = wynik z czego ilość to właśnie ta wspomniana wartość. Mam taki kod:

<div class="row">
                        <div class="col-xl-3 col-lg-3 col-md-3 col-sm-6 col-xs-6">
                            {{ item.price }}
                        </div>
                  
                        <div class="col-xl-3 col-lg-3 col-md-3 col-sm-6 col-xs-6">
                            <input type="number" id="surface" style="padding: 6px" aria-label="Powierzchnia" placeholder="Wpisz">
                        </div>
                        <div class="col-xl-3 col-lg-3 col-md-3 col-sm-6 col-xs-6">
                            {{ item.price * 5}} zł
                        </div>
                    </div>

i tutaj po wpisaniu wartości w input wynik powinien się dynamicznie zmieniać. Teraz po prostu testowo jest tam 5

komentarz 17 marca 2021 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)
co chcesz konkretnie zrobić? Nie widzę tutaj pętli...
komentarz 17 marca 2021 przez mi-20 Stary wyjadacz (13,140 p.)
Ale ten kod jest w pętli. Wyobraź sobie że na pierwszy div jest v-for. Wydawało mi się że to wytłumaczyłem ale podobna sytuacja jest w koszykach. Mamy produkty w koszyku, każdy ma cenę i ilość i dla każdego jest cena łączna cena * ilość = wynik. I tutaj chodzi o dynamiczne zmienianie ilości dla każdego produktu
komentarz 17 marca 2021 przez Bantu Nałogowiec (34,170 p.)
Napisz sobie metodę, która to przeliczy i wywołaj w widoku.
komentarz 17 marca 2021 przez mi-20 Stary wyjadacz (13,140 p.)
okej, ale jak mam pobrać wartość z tego inputa dla konkretnego rekordu. Jeśli dam tam v-model który będzie w pętli to przecież z automatu wartość będzie w całej liście
1
komentarz 17 marca 2021 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)
No dlatego nie rozumiem dlaczego nie zrobisz tego w ten sposób.
Każdy rekord (input + logika) wywal do komponentu. Następnie ten komponent stwórz tyle razy ile chcesz (za pomocą pętli). Maż v-model per komponent (rekord, item w koszyku - jak wolisz)
1
komentarz 18 marca 2021 przez mi-20 Stary wyjadacz (13,140 p.)
@Paweł Nąckiewicz Działa, dzięki. Na początku nie mogłem ogarnąć o co chodzi :)
komentarz 21 marca 2021 przez mi-20 Stary wyjadacz (13,140 p.)
A jeszcze jedno, jak to wszystko podliczyć? W sensie policzyć łączną wartość dla wszystkich rekordów
komentarz 22 marca 2021 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)
Jakiego vue używasz (wersja)?, pokaż swój kod dla komponentu który trzyma listę z itemami
1
komentarz 22 marca 2021 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)
w odpowiedz masz kod do vue2 stworzony na szybko

1 odpowiedź

+1 głos
odpowiedź 22 marca 2021 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)
wybrane 22 marca 2021 przez mi-20

Podobne pytania

+1 głos
1 odpowiedź 153 wizyt
pytanie zadane 16 stycznia w JavaScript przez mi-20 Stary wyjadacz (13,140 p.)
0 głosów
1 odpowiedź 143 wizyt
pytanie zadane 27 czerwca 2021 w JavaScript przez mikey Użytkownik (820 p.)
+1 głos
2 odpowiedzi 299 wizyt
pytanie zadane 19 kwietnia 2021 w JavaScript przez mi-20 Stary wyjadacz (13,140 p.)

92,125 zapytań

140,785 odpowiedzi

317,804 komentarzy

61,446 pasjonatów

Advent of Code 2023

Top 15 użytkowników

  1. 1468p. - Łukasz Eckert
  2. 1444p. - Dawid128
  3. 1430p. - CC PL
  4. 1419p. - rafalszastok
  5. 1418p. - Marcin Putra
  6. 1373p. - Mikbac
  7. 1362p. - rucin93
  8. 1351p. - sefirek
  9. 1296p. - Adrian Wieprzkowicz
  10. 1267p. - Eryk Andrzejewski
  11. 1260p. - TheLukaszNs
  12. 1239p. - JarekDev
  13. 1188p. - Rafał Trójniak
  14. 1179p. - 13NOONE37
  15. 1144p. - Michal Drewniak
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Uwaga - w dniach od 02.12 do 08.12 trwają Mikołajki (książki drukowane mają rabat -35%, ebooki do -45%). Zaś dodatkowy, specjalny kod zniżkowy: HELMIKOLAJ-10 dla naszych Widzów zapewni Wam oszczędność -10zł dla zamówień powyżej 70zł! Warto korzystać!

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...