Alerts appear mutliple times

[D3myon]

Hi,

somehow I’ve got some problems with Alerts.

Scenario

A user is logged in to a server. When he’s going to logout, an event is gone to be fired:

LocalStorage.remove('private_access_token')
Events.$emit('logout', {
  loggedIn: false
})

So far so good. Everthing works fine.

In my Layout.vue file the event handler does its work:

Events.$on('logout', response => {
  // some logic
  this.showLogoutAlert()
})

The function showLogoutAlert() does the following:

showLogoutAlert () {
  Alert.create({
    enter: 'bounceInRight',
    leave: 'bounceOutRight',
    color: 'positive',
    icon: 'lock',
    html: `Sie wurden erfolgreich abgemeldet`,
    position: 'top-right'
  })
}

In another part of the code, another event is fired, when a user changes the password:

Events.$emit('passwordChange', {
  showModal: false
})

The event handler does following:

Events.$on('passwordChange', response => {
  this.showPasswordModal = response.showModal
  this.showPassChangedAlert()
})

And the function showPassChangedAlert() contains the following code:

showPassChangedAlert () {
  Alert.create({
    enter: 'bounceInRight',
    leave: 'bounceOutRight',
    color: 'positive',
    icon: 'update',
    html: `Das Passwort wurde geändert`,
    position: 'top-right'
  })
}

The Problem

When the user is logged out. The alert appears. The little cross is tabbed and the alert disappears. Great!

But when the user does another login and goes to change the password, then the alert for the password change and the previous logout-alert show.

I really have no idea, why this is happening. May someone can help me please?

Thank you for your time.

Michael

[benoitranque]

Hi @D3myon. The code you posted seems correct, you probably have an error elsewhere. Could you post the smallest complete example that still reproduces the problem? Thank you!

[D3myon]

Hi @benoitranque,

I use a component called Sidelinks.vue. The function logout() is called here.

Part of the template (also from Sidelinks.vue)

<q-item @click="logout">
  <q-item-side icon="lock"/>
  <q-item-main label="Abmelden" sublabel=""/>
</q-item>

Script from Sidelinks.vue

  import {
    QList,
    QSideLink,
    QItemSide,
    QItemMain,
    QListHeader,
    QItemSeparator,
    QItem,
    Events
  } from 'quasar'

  import Helpers from '../Helpers.vue'

  export default {
    mixins: [Helpers],
    components: {
      QList,
      QSideLink,
      QItemSide,
      QItemMain,
      QListHeader,
      QItemSeparator,
      QItem
    },
    data () {
      return {
        loggedIn: false
      }
    },
    mounted () {
      this.loggedIn = this.isUserLoggedIn()
      Events.$on('logout', response => {
        this.loggedIn = response.loggedIn
      })
    }
  }

logout() is imported from Helpers.vue which is used as mixin

logout: function () {
  LocalStorage.remove('private_access_token')
  Events.$emit('logout', {
    loggedIn: false
  })
}

This is from Layout.vue (the parent layout)

    mounted () {
      this.changeColors()
      Events.$on('logout', response => {
        this.showLogoutAlert()
      })
    }

When I click on logout, the alert is shown multiple times and one above the other. So the one is hiding the other and when I tab the cross, it disappears and others are still visible until is dismiss them all.

[D3myon]

I see, the problem was, that I put the Event-Listener into the mounted() function. I put it into created() and unsubscribed the event in beforeDestroy().

Everything works fine now.

Example

created () {
  Events.$on('logout', response => {
    this.showLogoutAlert()
  })
},
beforeDestroy () {
  Events.$off('logout')
}

This does the trick for me.