NightCatSama/vue-slider-component

[vue3.x] V-MODEL AND @CHANGE DISPLAYS PREVIOUS VALUE

rzn1 opened this issue · 5 comments

rzn1 commented 
    <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]
NightCatSama commented

Can you provide an online example?

NightCatSama commented

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

rzn1 commented

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.

FrankDeWitt commented

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()"
/>
  • 👍1