search

vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.87k stars 6.96k forks source link

[Bug Report] Carousel - v-model not being updated correctly (prevents transition to the right) #12041

Closed pumpknhd closed 1 year ago

pumpknhd commented 4 years ago

Environment

Vuetify Version: 2.3.8 Vue Version: 2.6.11 Browsers: Chrome 84.0.4147.125 OS: Windows 10

Steps to reproduce

  1. Create v-carousel with a v-model.
  2. Create buttons for model++ and model--

Expected Behavior

When model reaches 0 and tries to model--, it should loop around to the end.

Actual Behavior

Model is stuck at 0.

Reproduction Link

https://codepen.io/pumpknhd/pen/BaKodyp

Other comments

The other direction works. See reproduction link. When at Slide 5 and you click on the plus icon, it goes to Slide 1. But at Slide 1 and you click on the minus button, it's stuck there.

Manually changing the v-model doesn't work because the transition would be in the wrong direction.

Mert75 commented 4 years ago

The cycle props allows you to do this with the arrows (which are also shown in the example), however, if you don't want to use them you could use watch: on the model to set the model to the last item if the models value is -1.

I made a codepen for you.

pumpknhd commented 4 years ago

@Mert75 Thanks for your codepen, but notice that the animation is inconsistent between the swipe vs the buttons. At Slide 5, I'd you click the button to go next, it slides appropriately to Slide 1. But when you swipe to go next, the animation is backwards.

Edit: The +/- buttons on top (which uses the model) also doesn't animate correctly. When it goes from 0 to -1, it doesn't animate correctly (compare this to the arrows).

johnleider commented 1 year ago

This Issue is being closed due to inactivity.

If you have any questions, please reach out to us in our Discord community.