VueJS - model problem

Imam pitanjce za znalce VueJS-a.

Naime ako kreiramo model na neko input polje…i ako se vrijednost tog input polja mijenja tako da korisnik nešto tipka unutar njega, onda će se promijeniti i vrijednost modela. To je očekivano i to je OK. Ali ako se vrijednost tog input polja promjeni nekom dinamikom…tipa datepicker je spojen na to input polje i odabirom datuma se mijenja vrijednost input polja. U tom slučaju korisnik nije ništa klikao unutar input polja i primjetio sam da tada nova vrijednost input polja se neće preslikat na model. Što je loše. A povlači za sobom i to da ako korisnik naion toga promjeni nešto na nekom drugom modelu, vrijednost tog input polja će se resetirati u stanje koje je bilo na početku, prije odabira iz datepickera.

Zna neko dobru soluciju za ovaj problem?

Nisam siguran da sam razumio u potpunosti pitanje.

v-model radi iskljucivo sa input, textarea, i select elementima, ako ti imas neki dodatak na taj input kao sto je datepicker ili nesto slicno, onda eksplicitno promijeni vrijednost u samom modelu nakon uspjesnog odabira datuma.

Ovako:

Ili prosto normJS-om ako ne ide drugačije.

Keyword za sličnu problematiku je observer (u Vue-u može i watcher).

1 Like

To je ono što želim upravo izbjeći. Jer ako imaš neku komponentu koja se inicijalizira nad input poljem i mijenja ga dinamički putem JS-a …onda imaš dupli posao da to setupiraš da se mijenja i vue model.

Nekako mi je logika da Vue modelu nebi trebalo biti bitno jel se input polje promjenilo ručno unosom korisnika ili dinamikom putem JS-a.
Ovakvom ponašanju iskreno ne vidim svrhu…više mi liči na propust Vue-a da to hendla…

Dao bi ti i dva lajka…znaš zašto :smiley: :smiley:

…a što se tiče rješenja, tako nešto slično i sam imam na pameti…ali sam se iskreno nadao da Vue ima nekakvi flag putem kojega se može aktivirati da model “vidi” i ako se input polje promjeni dinamički sa JS-om.

Jedina stvar o kojoj VueJS brine je model, i to je kako oni navode u dokumentaciji source of truth.

Ne razumijem sta mislis pod pojmom da se nesto promijeni dinamikom JS-a ? Ako ti eksplicitno promijenis model nakon izvresenja nekog eventa nije li to “promjena polja dinamicki putem JS-a” ?

Ako pak mislis na to da ti promijenis vrijednost inputa putem input.value = "something", mozes slobodno zaboraviti na to, jer dokumentacija za v-model kaze sljedece

v-model will ignore the initial value , checked or selected attributes found on any form elements. It will always treat the Vue instance data as the source of truth. You should declare the initial value on the JavaScript side, inside the data option of your component.

Nije to nikakav propust VueJS-a vec ti pokusavas koristiti v-model van njegovih definisianih okvira.Na svu srecu autori VueJS-a su obezbjedili vise nacina da rijesis ovaj problem tako da to definitivno nije nikakav propust.

Da, ovo je logično i sa time se slažem, ali obrati pažnju na boldani dio.
Znači oni govore da inicijalna vrijednost input pulju dolazi iz modela. I to je sasvim očekivano ponašanje i nisam niti ništa govorio kontra toga.

Ali nakon što si jednom postavio vrijednost input polju putem Vue modela, ta vrijednost će se vrlo vjerovatno zbog nečega mijenjati, a to može biti:

  • korisnik sam unosi novu vrijednost direktnim pisanjem u input polje. (Vue model to opaža i updejta se)
  • korisnik neposredno utječe na to da se vrijednost input polja promjeni. (Vue model to neće opaziti i updejtati se)

Neka logika mi je da ako je korisnik bilo kakvom svjesnom namjerom odlučio da se vrijednost input polja promjeni (nakon inicijanog setupiranja) …da bi Vue model to morao pratiti. Zato i jeste tu da u modelu imamo onu vrijednost koju imamo u input polju. (Naravno, da i mi možemo putem JS-a updejtati model i na taj način direktno updejtati vrijednost input polja. Što ne znači da su morali uskratiti da možemo i direktno sa JS-om updejtati vrijednost input polja? )

Kakvim sve načinima korisnik može mijenjati vrijednost input polju…uopće ne moramo ulaziti u to. Može biti zilijun različitih načina. (Ako ćemo tjerati mak na konac…može biti i jako netipičnih načina …možda eto nekom padne na pamet da kroz konsolu mijenja vrijednost input polja? )

Ali ne pada mi niti jedan od tih načina na pamet da on svjesno mijenja vrijednost input polju…a nama da ne paše da to Vue model prati i da se updejta.

Štoviše, nakon inicijalnog postavljanja input polja…kako god da dođe do nesinkronizacije između modela i vrijednosti u input polju…to će rezultirati bugom. Jer pred korisnikom će se prikazivati nešto u input polju, a u pozadini u kalkulaciju će ići druge brojke…

Ne vidim kako to može biti željeno ponašanje.

Pa ovaj dio i pitam…ako su ostavili neku opciju da model prati vrijednost input polja i ako ono bude dinamički updejtano putem JS-a?

Ako ti kroz konzolu uhvatis input element i promijenis mu vrijednost na ovakav nacin npr.

$0.value = 'neka vrijednost'

Nikakav event nece biti emitovan, i to ti je kako JS(DOM) radi, i samim tim ne vidim nacin kako bi Vue to mogao handleati.

Vue ti daje opciju da slusas bilo koji event koji input moze proizvesti i da shodno tome uhvatis vrijednost i updateas model.

To je kako Vue radi i u 99% posto situacija ti nema sta da brines o DOM-u.Model je taj koji odredjuje sta ce biti renderovano, a sta ne.

Ako bas zelis da radis ono sto nije preporuceno i ako programaticno mijenjas vrijednost inputa, onda s tom promjenom trebas i emitati event, u tom slucaju VueJS bi trebao raditi onako kako ti ocekujes.

A evo ti i sam dokaz.