[vue3.x] V-MODEL AND @CHANGE DISPLAYS PREVIOUS VALUE
rzn1 opened this issue · 5 comments
<Slider
v-model="playerRotation"
:min="-180"
:max="180"
:interval="1"
@change="RotatePlayer()"
/>
RotatePlayer(){ console.log(this.playerRotation); DISPLAYS PREVIOUS VALUE
any workaround or am i doing something wrong?
https://gyazo.com/dfa99b7a98ec86d187dc3f087c683849
https://gyazo.com/9e862e954669c5589d2e89e337d7859e
- OS & Version: [e.g. macOS, Windows, Linux] Windows
- Vue version: [v3.0.0]
- Component Version: [e.g. v4.0.0-beta.1]
Can you provide an online example?
Because updating the v-model
and @change
are performed synchronously, the v-model
has not changed at the time of @change
. You can use the @change
parameter to get the latest value.
https://codesandbox.io/s/funny-haslett-sbojf?file=/src/App.vue
The thing is that i tried same thing with vue 2 and it worked so i thought this should not be happening with vue 3 also, but i guess your way will work also, thanks.
The event change has a bug with the modelValue
. Try to destructure v-model to :model-value
and @update:modelValue
<Slider
:model-value="playerRotation"
:min="-180"
:max="180"
:interval="1"
@update:modelValue="RotatePlayer()"
/>