Vuetify: [Bug Report] V-slide-group arrows fail when adding slide items when v-slide-group has v-show==false

Created on 5 Feb 2020  路  7Comments  路  Source: vuetifyjs/vuetify

Environment

Vuetify Version: 2.2.9
Vue Version: 2.6.11
Browsers: Chrome 80.0.3987.87
OS: Mac OS 10.13.6

Steps to reproduce

Using the codepen link:

  1. Click add and see that items successfully add to the slide group.
  2. Click hide, which toggles v-show to false on the slide group. (Note, this happens in my app because a route with a slide group is set as "keep alive", so when I come back to the route, it causes this issue).
  3. Add to the slide group with the add button while the slide group is still hidden.
  4. Click hide to toggle v-show so that the slide group becomes visible again, and see that its arrows are erroneously gone.

Expected Behavior

When slide group comes becomes visible again, the arrows visibility should be figured out automatically.

Actual Behavior

When the slide group becomes visible, arrows are gone.

Reproduction Link

https://codepen.io/jauntcode/pen/KKpPROd

VSlideGroup

Most helpful comment

I can reproduce it in current chrome

All 7 comments

I wonder if the solution is to call setWidths() when the vue activated lifecycle event fires? https://vuejs.org/v2/api/#activated

@jaunt Your reproduction link is working as expected for me. Please create another one if it's still not working for you.

I can reproduce it in current chrome

There is a number of hacks but I don't like any of the cause they are all hard-coding CSS.
.v-slide-group__prev {
display: flex !important;
}
Even after updating vuetify to 2.3.4, issue still persist

Please I need another solution. Had same problem on all browsers even IE11

I'm having this issue as well.

I'm having this issue as well with v-slide-group and v-tabs in 2.3.7 version.

I'm using this workaround for now

<template>
  <v-slide-group v-show="isVisible" ref="slideGroup">
    <v-slide-item>...</v-slide-item>
  </v-slide-group>
</template>
<script>
export default {
  watch: {
    isVisible(val) {
      if (val) this.$refs.slideGroup.setWidths();
    }
  }
};
</script>
Was this page helpful?
0 / 5 - 0 ratings

Related issues

mitar picture mitar  路  39Comments

husayt picture husayt  路  27Comments

CasperLaiTW picture CasperLaiTW  路  30Comments

DeepDiver1975 picture DeepDiver1975  路  32Comments

thearabbit picture thearabbit  路  31Comments