Get data from mixin Vue.js

Question

I have a Vue component 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 computed property. It seems that using this.notifications does not work. How can I do this?

Here is my component:

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

Vue.component('spark-notifications', {

    mixins: [base],

});

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

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

    /**
     * The component'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');
                });
        }
    },


    computed: {
        /**
         * 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('./components/bootstrap');

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

Answer 1

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

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.component('spark-notifications', { 

    mixins: [base], 

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

});