hjortur17
6 months ago
40
3
Vue

TypeError: undefined is not an object

Posted 6 months ago by hjortur17

Hi, I was following Jeffrey's tutorial on how to build FlashMessage. But I get an error message, can somebody help me?

This is the error message:

[Error] [Vue warn]: Error in created hook: "TypeError: undefined is not an object (evaluating 'window.events.$on')"

found in

---> <Flash> at resources/js/components/Flash.vue
       <Root>
    warn (app.js:38274)
    logError (app.js:39532)
    globalHandleError (app.js:39527)
    handleError (app.js:39488)
    invokeWithErrorHandling (app.js:39510)
    callHook (app.js:41831)
    _init (app.js:42603)
    VueComponent (app.js:42748)
    createComponentInstanceForVnode (app.js:40923)
    init (app.js:40754)
    createComponent (app.js:43574)
    createElm (app.js:43521)
    createChildren (app.js:43649)
    createElm (app.js:43550)
    patch (app.js:44110)
    _update (app.js:41557)
    updateComponent (app.js:41678)
    get (app.js:42079)
    Watcher (app.js:42068)
    mountComponent (app.js:41685)
    _init (app.js:42613)
    Vue (app.js:42679)
    ./resources/js/app.js (app.js:49648)
    __webpack_require__ (app.js:20)
    (anonymous function) (app.js:49810)
    __webpack_require__ (app.js:20)
    (anonymous function) (app.js:84)
    Global Code (app.js:85)
[Error] TypeError: undefined is not an object (evaluating 'window.events.$on')
    logError (app.js:39536)
    globalHandleError (app.js:39527)
    handleError (app.js:39488)
    invokeWithErrorHandling (app.js:39510)
    callHook (app.js:41831)
    _init (app.js:42603)
    VueComponent (app.js:42748)
    createComponentInstanceForVnode (app.js:40923)
    init (app.js:40754)
    createComponent (app.js:43574)
    createElm (app.js:43521)
    createChildren (app.js:43649)
    createElm (app.js:43550)
    patch (app.js:44110)
    _update (app.js:41557)
    updateComponent (app.js:41678)
    get (app.js:42079)
    Watcher (app.js:42068)
    mountComponent (app.js:41685)
    _init (app.js:42613)
    Vue (app.js:42679)
    ./resources/js/app.js (app.js:49648)
    __webpack_require__ (app.js:20)
    (anonymous function) (app.js:49810)
    __webpack_require__ (app.js:20)
    (anonymous function) (app.js:84)
    Global Code (app.js:85)

And this is the app.js file

require('./bootstrap');

window.Vue = require('vue');

import Flash from './components/Flash.vue';

const app = new Vue({
    el: '#app',
    components: {Flash}
});

And this is Flash.vue file

<template>
       <div>
              <div class="bg-green-lightest border-l-4 border-green text-green-dark p-4 alert-flash" role="alert" v-show="show">
                     <p class="font-medium mb-1">Be Warned</p>
                     <p class="text-sm">{{ body }}</p>
              </div>
       </div>
</template>

<script>
       export default {
              props: ['message'],

              data() {
                     return {
                            body: '',
                            show: false
                     }
              },

              created() {
                     if (this.message) {
                            this.flash(this.message);
                     }

                     window.events.$on('flash', message => {
                            this.flash(message);
                     });
              },

              methods: {
                     flash(message) {
                            this.body = message; 
                            this.show = true;

                            this.hide();
                     },

                     hide() {
                            setTimeout(() => {
                                   this.show = false;
                            }, 3000);
                     }
              }
       }
</script>

<style type="text/css">
       .alert-flash {
              position: fixed;
              right: 0;
              padding-right: 40px;
              bottom: 25px;
       }
</style>

Please sign in or create an account to participate in this conversation.