Can you help me understand this unexpected behaviour?

Fran — Sat, 09 Dec 2023 23:02:31 +0000

Hi!

So some time ago I wrote a D&D stat calculator thingie in React. I recently had the opportunity to apply to a Vue position, and as I was interested in Vue, I quickly read through the docs and thought it'd be a fun exercise to "translate" the app to Vue. I later got carried away and tried Svelte, too!

The thing is, I had issues with one particular single-digit input. I used two-way binding to sync it to a ref, with custom "validation". The behind-the-scene state updates correctly, but the input value "unbinds" when typing more than one key, frustratingly.

I ended up manually re-affirming event.target.value to the same value I pass through the emit function to update the v-model ref as its described in the docs.

So, I solved it, but it bugs me, what is happening? In React or Svelte I didnt have this problems with the same-ish validation on input, so I'm not enterely satisfied by not knowing why it happens in the first place.

Link to the parent component
Link to the child component

Link to the deployed app

DEV Community: Fran

Can you help me understand this unexpected behaviour?