I have a Vue ponent that requires a file that is a Vue mixin. The file that is required is part of a vendor package so I cannot modify that file. I need to get the notifications prop from the mixin. The end result is that I am going to access the notifications object and get the amount of read notifications so that I display this count as a puted property. It seems that using this.notifications does not work. How can I do this?

Here is my ponent:

var base = require('notifications/notifications');

Vueponent('spark-notifications', {

    mixins: [base],

});

Here is the notifications file that was required in the previous ponent:

module.exports = {
    props: ['notifications', 'hasUnreadAnnouncements', 'loadingNotifications'],

    /**
     * The ponent's data.
     */
    data() {
        return {
            showingNotifications: true,
            showingAnnouncements: false
        }
    },


    methods: {
        /**
         * Show the user notifications.
         */
        showNotifications() {
            this.showingNotifications = true;
            this.showingAnnouncements = false;
        },


        /**
         * Show the product announcements.
         */
        showAnnouncements() {
            this.showingNotifications = false;
            this.showingAnnouncements = true;

            this.updateLastReadAnnouncementsTimestamp();
        },


        /**
         * Update the last read announcements timestamp.
         */
        updateLastReadAnnouncementsTimestamp() {
            this.$http.put('/user/last-read-announcements-at')
                .then(() => {
                    this.$dispatch('updateUser');
                });
        }
    },


    puted: {
        /**
         * Get the active notifications or announcements.
         */
        activeNotifications() {
            if ( ! this.notifications) {
                return [];
            }

            if (this.showingNotifications) {
                return this.notifications.notifications;
            } else {
                return this.notifications.announcements;
            }
        },


        /**
         * Determine if the user has any notifications.
         */
        hasNotifications() {
            return this.notifications && this.notifications.notifications.length > 0;
        },


        /**
         * Determine if the user has any announcements.
         */
        hasAnnouncements() {
            return this.notifications && this.notifications.announcements.length > 0;
        }
    }
};

The beginning of the Laravel blade template:

<spark-notifications
            :notifications="notifications"
            :has-unread-announcements="hasUnreadAnnouncements"
            :loading-notifications="loadingNotifications"
            inline-template>

Here is the method in the spark.js which gets the notifications:

    data: {
            user: Spark.state.user,
            teams: Spark.state.teams,
            currentTeam: Spark.state.currentTeam,

            loadingNotifications: false,
            notifications: null,

            supportForm: new SparkForm({
                from: '',
                subject: '',
                message: ''
            })
        },    

        getNotifications() {
                this.loadingNotifications = true;

                this.$http.get('/notifications/recent')
                    .then(response => {
                        this.notifications = response.data;

                        this.loadingNotifications = false;
                    });
            },

And, here is where everything is bootstrapped together app.js:

require('spark-bootstrap');
require('./ponents/bootstrap');

var app = new Vue({
    mixins: [require('spark')]
});

I have a Vue ponent that requires a file that is a Vue mixin. The file that is required is part of a vendor package so I cannot modify that file. I need to get the notifications prop from the mixin. The end result is that I am going to access the notifications object and get the amount of read notifications so that I display this count as a puted property. It seems that using this.notifications does not work. How can I do this?

Here is my ponent:

var base = require('notifications/notifications');

Vue.ponent('spark-notifications', {

    mixins: [base],

});

Here is the notifications file that was required in the previous ponent:

module.exports = {
    props: ['notifications', 'hasUnreadAnnouncements', 'loadingNotifications'],

    /**
     * The ponent's data.
     */
    data() {
        return {
            showingNotifications: true,
            showingAnnouncements: false
        }
    },


    methods: {
        /**
         * Show the user notifications.
         */
        showNotifications() {
            this.showingNotifications = true;
            this.showingAnnouncements = false;
        },


        /**
         * Show the product announcements.
         */
        showAnnouncements() {
            this.showingNotifications = false;
            this.showingAnnouncements = true;

            this.updateLastReadAnnouncementsTimestamp();
        },


        /**
         * Update the last read announcements timestamp.
         */
        updateLastReadAnnouncementsTimestamp() {
            this.$http.put('/user/last-read-announcements-at')
                .then(() => {
                    this.$dispatch('updateUser');
                });
        }
    },


    puted: {
        /**
         * Get the active notifications or announcements.
         */
        activeNotifications() {
            if ( ! this.notifications) {
                return [];
            }

            if (this.showingNotifications) {
                return this.notifications.notifications;
            } else {
                return this.notifications.announcements;
            }
        },


        /**
         * Determine if the user has any notifications.
         */
        hasNotifications() {
            return this.notifications && this.notifications.notifications.length > 0;
        },


        /**
         * Determine if the user has any announcements.
         */
        hasAnnouncements() {
            return this.notifications && this.notifications.announcements.length > 0;
        }
    }
};

The beginning of the Laravel blade template:

<spark-notifications
            :notifications="notifications"
            :has-unread-announcements="hasUnreadAnnouncements"
            :loading-notifications="loadingNotifications"
            inline-template>

Here is the method in the spark.js which gets the notifications:

    data: {
            user: Spark.state.user,
            teams: Spark.state.teams,
            currentTeam: Spark.state.currentTeam,

            loadingNotifications: false,
            notifications: null,

            supportForm: new SparkForm({
                from: '',
                subject: '',
                message: ''
            })
        },    

        getNotifications() {
                this.loadingNotifications = true;

                this.$http.get('/notifications/recent')
                    .then(response => {
                        this.notifications = response.data;

                        this.loadingNotifications = false;
                    });
            },

And, here is where everything is bootstrapped together app.js:

require('spark-bootstrap');
require('./ponents/bootstrap');

var app = new Vue({
    mixins: [require('spark')]
});

• javascript
• vue.js

Share Improve this question Follow edited Apr 21, 2016 at 12:53 dericcain asked Apr 20, 2016 at 20:24 dericcaindericcain 2,30077 gold badges3333 silver badges5353 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

this.notifications is the correct way. If that is not defined, it is because no notifications prop was passed to the ponent.

Edit: The reason it was null in the ready() function is that the http request retrieving the notifications hadn't returned yet. OP was trying to get the count of unread notifications, which we got working like so:

Vue.ponent('spark-notifications', { 

    mixins: [base], 

    puted: { 
        notificationCount:function(){ 
            var unread = this.notifications.notifications.filter(function(notif){ 
                return !notif.read; 
            });
            return unread.length 
        }
    } 

});