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

[jaunt]

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

[jaunt]

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

[Leespiker]

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

[jacekkarczmarczyk]

I can reproduce it in current chrome

[dumptyd]

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>

[digisomni]

This is a problem with Vuetify 2.3.9. No workarounds are currently working for me.

[k3ssen]

Using dumptyd's suggestion works for me after the slide-items have been loaded. Directly calling this.$refs.slideGroup.setWidths(); didn't work for me and even calling it inside in this.$nextTick didn't work. However, it did work when using a timeout that waits long enough.
(I'm using vuetify version 2.5.8)

[MaxWeisen]

Using dumptyd's suggestion works for me after the slide-items have been loaded. Directly calling this.$refs.slideGroup.setWidths(); didn't work for me and even calling it inside in this.$nextTick didn't work. However, it did work when using a timeout that waits long enough. (I'm using vuetify version 2.5.8)

@k3ssen
Calling this.$refs.slideGroup.setWidths(); in Vue's updated () lifecycle hook made this workaround effective for me.

[serdarcanerden]

.v-slide-group:not(.v-slide-group--has-affixes) > .v-slide-group__prev,
.v-slide-group:not(.v-slide-group--has-affixes) > .v-slide-group__next {
display: inherit !important;
}
.v-slide-group__next--disabled,
.v-slide-group__prev--disabled {
pointer-events: auto !important;
}

For my case adding these css classes as above solved the issue. While selecting something from the items arrows were appearing but without interaction these css classes were blocking them (show-arrows was used). These are coming as display : none and pointer-events : none