• 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

VMware Cloud PRO - przenieś swoją infrastrukturę IT do chmury
0 głosów
265 wizyt
pytanie zadane 17 marca 2021 w JavaScript przez mi-20 Stary wyjadacz (13,250 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,250 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,250 p.)
Napisz sobie metodę, która to przeliczy i wywołaj w widoku.
komentarz 17 marca 2021 przez mi-20 Stary wyjadacz (13,250 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,250 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,250 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ź 359 wizyt
pytanie zadane 16 stycznia 2023 w JavaScript przez mi-20 Stary wyjadacz (13,250 p.)
0 głosów
1 odpowiedź 209 wizyt
pytanie zadane 27 czerwca 2021 w JavaScript przez mikey Użytkownik (820 p.)
+1 głos
2 odpowiedzi 572 wizyt
pytanie zadane 19 kwietnia 2021 w JavaScript przez mi-20 Stary wyjadacz (13,250 p.)

93,437 zapytań

142,431 odpowiedzi

322,671 komentarzy

62,802 pasjonatów

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

...