se-panfilov / vue-notifications

Vue.js agnostic library for non-blocking notifications
https://se-panfilov.github.io/vue-notifications/
MIT License
698 stars 54 forks source link

Can't throw a notification on "created" or "mounted" events #199

Open lc-thomas opened 4 years ago

lc-thomas commented 4 years ago
<template>
  <div id="home">
    Vue webapp home :)
  </div>
</template>

<script>
import {HTTP} from '@/http-common.js'

export default {
  name: 'home',
  data () {
    return {
    }
  },
  notifications: {
    showWelcome: {
      title: 'Welcome :)',
      type: 'success'
    },
    showAPIError: { // You can have any name you want instead of 'showLoginError'
      title: 'API request failed',
      message: '',
      type: 'error' // You also can use 'VueNotifications.types.error' instead of 'error'
    },
  },
  methods: {
  },
  created(){
    this.showWelcome()
    HTTP.get('/api/home')
      .then(response => {
        this.showWelcome(response)
      })
      .catch(error => {
        this.showAPIError({message:error})
      })
  }
}
</script>

<style scoped>
</style>

So when I first load the page, I get errors : [Vue warn]: Error in created hook: "TypeError: this.showWelcome is not a function"

But if I edit one line, save the file, (using webpack dev server), then the page isn't reloaded but the componant is re-created, and then I get the notification.

So it looks like "notifications" functions are created after the component is created, so you can't really throw a notification until then. Or am I doing something wrong ?