Ottieni dati da mixin Vue.js

Question

Ho un componente Vue che è il file requires un file Vue. Il file richiesto fa parte di un pacchetto fornitore quindi non posso modificare quel file. Ho bisogno di prendere il puntello notifications dal mixin. Il risultato finale è che accedo all'oggetto notifications e ottengo la quantità di notifiche di lettura in modo da visualizzare questo conteggio come proprietà calcolata. Sembra che l'utilizzo di this.notifications non funzioni. Come posso fare questo?

Qui è la mia componente:

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

Vue.component('spark-notifications', { 

    mixins: [base], 

}); 

Ecco il file notifications che è stato richiesto nel componente precedente:

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; 
     } 
    } 
}; 

L'inizio del modello lama laravel:

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

Ecco il metodo nello spark.js che ottiene la notifica fiche:

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; 
        }); 
      }, 

Ed, ecco dove tutto è bootstrap insieme app.js:

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

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

Answer 1

this.notifications è il modo corretto. Se non è definito, è perché non è stata passata alcuna proposta di puntino notifications al componente.

Modifica: il motivo per cui era null nella funzione ready() è che la richiesta http che recuperava le notifiche non era ancora stata restituita. OP stava cercando di ottenere il conteggio delle notifiche non lette, che abbiamo ottenuto a lavorare in questo modo:

Vue.component('spark-notifications', { 

    mixins: [base], 

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

});