search

unovue / shadcn-vue

Vue port of shadcn-ui
https://www.shadcn-vue.com/
MIT License
5.22k stars 308 forks source link

[Bug]: Weird Slider Bug with v-model #476

Closed jupelost closed 7 months ago

jupelost commented 7 months ago

Reproduction

https://stackblitz.com/edit/9wnv28?file=src%2FApp.vue

Describe the bug

When using vmodel to bind slider to a ref and binding it to another input as well weird issue happens where the value of the slider doesnt change to get updated i tried the emit prop for on change but i cant seem to get it working

https://github.com/radix-vue/shadcn-vue/assets/94334900/5aed2336-29b0-4185-a1a7-f4299320317f

System Info

Windows 11, vue 3.4.21, nuxt 3.11.2

Contributes

sadeghbarati commented 7 months ago

Slider component modelValue is like [number] and normal input modelValue is like number that will cause conflict between these two

Look at SliderForm code initialValue duration is: [30] https://www.shadcn-vue.com/docs/components/slider.html#form

But when Slider is not multiple it's weird that modelValue is still accepting [30] not 30

jupelost commented 7 months ago

hmm i wonder if there's a work around seems to be a vue thing, i did something similar in react and it works

pinky-pig commented 7 months ago

I think it's possible that in Vue, when updating data through components, the value type of v-model will be updated to the corresponding data format.In your code, when type="number", the format of modelValue is number; when type="range", the format is string. However, this is different from the format of modelValue for Slider, which is an array of numbers.

jupelost commented 7 months ago

i ended up figuring it out using computed as an intermediary between the two. The computed property handled the conversion between the array value and the single number value.

https://stackblitz.com/edit/9wnv28?file=src%2FApp.vue