vendredi 13 avril 2018

Laravel VueJS - Error in created hook: "ReferenceError: Data is not defined"

I was working on something not related to vue at all but when I refreshed this error occurred. Which is odd to me since I did not touch the code where this error occurs at all. The error says

[Vue warn]: Error in created hook: "ReferenceError: data is not defined"

found in

---> <Flash> at resources\assets\js\components\Flash.vue

And the file where it point to looks like this:

<template>
<transition name="custom-classes-transition" enter-active-class="animated bounceInRight" leave-active-class="animated bounceOutRight">
    <div class="media bg-gradient depth-5 alert-position" v-show="show" role="alert">
        <i class="fal fa-check-circle align-self-center m-4" style="font-size: 3rem; color: white"></i>
        <div class="media-body bg-light p-4">
            <div class="row">
                <div class="col">
                    <h5 class="m-0">Succes!</h5>
                </div>
            </div>
            <p class="m-0 text-muted"></p>
        </div>
    </div>
</transition>

</template>

<script>
export default {

    props: ['message'],

    data() {
        return {
            body: this.message,
            show: false
        }
    },

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

        }

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

    methods: {
        flash(message) {
            if (data) {
                this.body = message;
            }

            this.show = true;

            this.hide();
        },

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

<style>
.media {
    border-radius: 10px;

}

.media .media-body {
    background-color: white !important;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}

.alert-position {
    position: fixed;
    right: 0;
    bottom: 0;
    margin-bottom: 50px;
    margin-right: 30px;
}
</style>

I don't get this at all. It used to work perfectly and for some odd reason, it doesn't anymore. What is causing this?



via Chebli Mohamed

1 commentaire: