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

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

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 :)