snackbars always go up, even when using top

[Greg Veres]

Hi, unless I am using this wrong, the snackbars always appear on top of each other and disappear down, even when you use the top option.

I think if the top option is used, you want the snackbars to build down the screen and vanish upwards.

[Greg Veres]

I am looking at the code, specifically the css-style sub-component. I think you are trying to do the right thing with the topOrBottom(idx) calls. I have to figure out what they are doing.

So maybe I am using it wrong.

here is what how I am putting it on my screen:

<template>
  <v-app :style="globalStyles" v-if="loaded">
    <navbar />

    <v-main :style="bgColor">
      <loadingBar />
      <v-snackbars :objects.sync="toasts" top right></v-snackbars>
      <router-view></router-view>
    </v-main>
    <sfooter />
  </v-app>
</template>

I am using objects so that I can control the colour of each snackbar. (I also need to figure out how to control the foreground colour of each snackbar too.)

[Greg Veres]

Oh, I think I see. Not only do I need to specify top on the , I also have to specify it on each toast as well. Hmm, in my opinion that isn't the right interface. My snackbar objects should not care how the v-snackbars is setup for location. I can see how you want to be able to override but the v-snackbars config should be taken into consideration.

[Greg Veres]

I can see that topOrBottom isn't quite right. It assumes that getProp('top', i) is going to return true, but the way that vuetify is expecting top to be defined is for it to just exist because it is a boolean, not a string. So your check for

this.getProp('top', i) === true 

is always going to be false.

[Greg Veres]

Ok here is a version of getProp and topOrBottom that fixes the issue. I have tested this with both bottom and top, left and right.

    getProp(prop, i) {
      if (this.objects.length > i && typeof this.objects[i][prop] !== 'undefined')
        return this.objects[i][prop];
      if (typeof this.$attrs[prop] !== 'undefined') return this.$attrs[prop];
      if (typeof this[prop] !== 'undefined') return this[prop];
      return undefined;
    },
    topOrBottom(i) {
      return typeof this.getProp('top', i) !== 'undefined' ? 'top' : 'bottom';
    },

[Aymeric]

A PR would have been appreciated :-p

Thanks for sharing the code. I've just published a new version.