Get data from mixin Vue.js

Question

I have a Vue component that requires is a file that is a Vue mixin. The required file is part of the provider package, so I cannot modify this file. I need to get support for notifications from mixin. As a result, I get access to the notifications object and get the number of read notifications to display this score 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 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; } } }; 

Beginning of the Laravel blade template:

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

Here is the method in spark.js that receives 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 this is where everything loads together app.js :

 require('spark-bootstrap'); require('./components/bootstrap'); var app = new Vue({ mixins: [require('spark')] }); 

Answer 1

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

Edit: The reason this was null in the ready() function is because the HTTP request receiving the notifications has not yet returned. The OP tried to get the number of unread notifications we received like this:

 Vue.component('spark-notifications', { mixins: [base], computed: { notificationCount:function(){ var unread = this.notifications.notifications.filter(function(notif){ return !notif.read; }); return unread.length } } });