hjortur17
165
15
Vue

Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'response.data')

Posted 1 week ago by hjortur17

Hi, I'm trying to make my Flash component have a level element so if I need it to be danger, success or warning it will change colors. But I always get this error when submiting a form.

Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'response.data')

Any ideas how to fix this?

Here is the files,

RepliesController:

public function store($channelId, Thread $thread, Spam $spam)
    {
        try {
            $this->validateReply();

            $reply = $thread->addReply([
                'body' => request('body'),
                'user_id' => auth()->id()
            ]);
        } catch (\Exception $e) {
            return response(
                'Sorry, your reply could not be saved at this time.', 422
            );
        }

        return $reply->load('owner');
    }

    public function update(Reply $reply, Spam $spam)
    {
        $this->authorize('update', $reply);

        try {
            $reply->validate(request(), ['body' => 'required']);
            $spam->detect(request('body'));
            
            $reply->update(request(['body']));          
        } catch (\Exception $e) {
            return response(
                'Sorry, your reply could not be saved at this time', 422
            );
        }
    }

Bootstrap.js file:

window.Vue = require('vue');

Vue.prototype.authorize = function(handler) {
    let user = window.App.user;

    return user ? handler(user) : false;
};

window.events = new Vue();

window.flash = function (message, level = 'success') {
    window.events.$emit('flash', { message, level });
};

Flash component:

<template>
    <div class="border-l-4 p-4 px-6 fixed pin-r pin-b mb-6 rounded-l shadow" 
        :class="'alert-'+level" 
        role="alert" 
        v-show="show ">
        <!-- <p class="font-semibold">Vel gert!</p> -->
        <p class="font-light text-sm mt-2" v-text="body"></p>
    </div>
</template>

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

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

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

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

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

                this.hide();
            },

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

NewReply.vue

<template>
    <div id="reply-form" class="pt-8">
        <div class="flex" v-if="signedIn">
            <div class="w-10 item-start">
                <img src="/css/img/test/me.jpg" class="rounded-full w-10 h-10 object-cover">
            </div>
            <div class="w-full pl-3 self-center">
                <div class="flex items-center bg-grey-lighter rounded-full text-grey-darker focus:text-black resize-none outline-none text-sm">
                    <input class="appearance-none bg-transparent rounded-full text-grey-dark w-full pl-4 leading-tight focus:outline-none focus:text-grey-darkest transition" type="text" placeholder="Vitlu leggja orð í belg?" name="body" v-model="body" required>
                    <button class="flex-no-shrink bg-blue p-2 px-4 rounded-full" type="submit" @click="addReply">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="15px" height="15px"><path d="M476 3.2L12.5 270.6c-18.1 10.4-15.8 35.6 2.2 43.2L121 358.4l287.3-253.2c5.5-4.9 13.3 2.6 8.6 8.3L176 407v80.5c0 23.6 28.5 32.9 42.5 15.8L282 426l124.6 52.2c14.2 6 30.4-2.9 33-18.2l72-432C515 7.8 493.3-6.8 476 3.2z" fill="#fff"/></svg>
                    </button>
                </div>
            </div>
        </div>
        <p class="text-sm text-grey-dark" v-else>Þú þarft að vera <a href="/login" class="text-blue-light no-underline hover:text-blue transition">skráð/ur inn</a> til þess að taka þátt í umræðuni</p>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                body: ''
            };
        },

        computed: {
            signedIn() {
                return window.App.signedIn;
            }
        },

        methods: {
            addReply() {
                axios.post(location.pathname + '/athugasemdir', { body: this.body })
                    .catch(error => {
                        flash(error.response.data, 'danger');
                    })
                    .then(response => {
                        this.body = '';

                        flash('Kommentið þitt hefur verið birt!');

                        this.$emit('created', response.data);
                    });
            }
        }
    }
</script>

Reply.vue

<template>
    <div :id="'athugasemd-'+id" class="pt-8">
        <div class="flex">
            <div class="w-10 item-start">
                <a :href="'/notendur/'+data.owner.username">
                    <img src="/css/img/test/user.jpg" class="rounded-full w-10 h-10">
                </a>
            </div>
            <div class="w-full pl-3">
                <div class="flex">
                    <div class="flex-1">
                        <a :href="'/notendur/'+data.owner.username" class="no-underline text-blue hover:text-blue-dark transition">
                            <h3 class="font-semibold text-base" v-text="data.owner.name"></h3>
                        </a>
                    </div>

                    <div class="w-16" v-if="canUpdate">
                        <div class="flex">
                            <div class="flex-1 text-right">
                                <ul class="list-reset flex float-right">
                                    <li class="pr-3">
                                        <a @click="editing = true" class="cursor-pointer">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="11px"><path d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z" fill="#38a89d"/></svg>
                                        </a>
                                    </li>
                                    <li>
                                        <a @click="destroy" class="cursor-pointer">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="11px"><path d="M32 464a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128H32zm272-256a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zM432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z" fill="#ef5753"/></svg>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="editing">
                    <input class="bg-grey-lighter w-full rounded-full px-3 py-2 text-sm my-4 outline-none" v-model="body">

                    <ul class="list-reset flex float-right mb-2">
                        <li class="pr-4">
                            <button @click="editing=false">
                                <p class="text-xs text-grey-darker hover:text-red transition">Hætta</p>
                            </button>
                        </li>
                        <li>
                            <button @click="update">
                                <p class="text-xs font-semibold text-orange-light hover:text-orange-dark transition">Uppfæra</p>
                            </button>
                        </li>
                    </ul>
                </div>
                <div v-else>
                    <p class="my-3 text-sm" v-text="body"></p>
                </div>
                <ul class="list-reset flex">
                    <li v-if="signedIn" class="pr-4">
                        <favorite :reply="data"></favorite>
                    </li>
                    <li>
                        <p class="text-xs text-grey self-center" v-text="timeAgo"></p>
                    </li>
                </ul>
            </div>
        </div>
    </div>  
</template>

<script>
    import Favorite from './Favorite.vue';
    import moment from 'moment';

    export default {
        props: ['data'],

        components: { Favorite },

        data() {
            return {
                editing: false,
                id: this.data.id,
                body: this.data.body
            };
        },

        computed: {
            timeAgo() {
                return moment(this.data.created_at).fromNow();
            },
            signedIn() {
                return window.App.signedIn;
            },

            canUpdate() {
                return this.authorize(user => this.data.user_id == user.id);
            }
        },

        methods: {
            update() {
                axios.patch(
                        '/athugasemdir/' + this.data.id, {
                        body: this.body
                    })
                    .catch(error => {
                        flash(error.response.data, 'danger');
                    });

                this.editing = false;

                flash('Kommentið þitt hefur verið uppfært!');
            },

            destroy() {
                axios.delete('/athugasemdir/' + this.data.id);

                this.$emit('deleted', this.data.id);
            }
        }
    }
</script>

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

Reply to

Use Markdown with GitHub-flavored code blocks.