Vuetify: [Bug Report] Re-using a snackbar with different timeout does not work

[everhardt]

Versions and Environment

Vuetify: 1.3.12
Vue: 2.5.20
Browsers: Chrome 70.0.3538.110
OS: Mac OS 10.14.1

Steps to reproduce

In codepen:

1. Press "show snackbar"
2. Press one of the other two buttons within 3 seconds

Expected Behavior

Snackbar will stay for 10 sec or forever, dependent on button pressed

Actual Behavior

Snackbar disappears 3 seconds after initial display

Reproduction Link

https://codepen.io/everhardt/pen/pqJvNM

Other comments

The timeout parameter can now only be used when the v-model of the snackbar is set to false. Reusing the snackbar with a different timeout cannot easily be done when it is currently shown, as

this.show = false;
this.timeout = 0;
this.show = true;

will not trigger a refresh. Only

this.show = false;
Vue.nextTick(function () {
  // DOM updated
  this.timeout = 0;
  this.show = true;
})

will.

[everhardt]

I've found a "hacky" solution in the mean time, that suggests not using the timeout of the snackbar at all and just rolling your own: https://github.com/vuetifyjs/vuetify/issues/371#issuecomment-334975356

[simonmaass]

i just ran into exactly this problem

[CharlelieBouvier]

Got the same issue, fixed doing this :

  this.snackbar.show = false
  this.$nextTick(() => {
    this.snackbar.show = true
    this.snackbar.text = text
    this.snackbar.color = color
  })

[kororos]

I am having the same issue. It gets really messy when the timeout depends on a value from the Vuex store. I was trying to set the timeout in a computed property which means that I cannot even alter local state (as this is side-effect). Any help would be appreciated.

[johnleider]

resolved by #11542

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