Veri kaynağından veri alma Vue.js

Question

Vue bileşenine sahip bir dosyam var. Gerekli dosya bir satıcı paketinin bir parçası olduğundan, bu dosyayı değiştiremiyorum. Karışımdan notifications desteğini almam gerekiyor. Sonuç olarak, notifications nesnesine erişeceğim ve bu sayımı hesaplanmış özellik olarak gösterecek şekilde okuma bildirimlerinin miktarını alacağım. this.notifications kullanmıyor gibi görünüyor. Bunu nasıl yapabilirim?

İşte

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

Vue.component('spark-notifications', { 

    mixins: [base], 

}); 

önceki bileşende gerekti notifications dosyasıdır: Burada

benim bileşenidir

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

laravel bıçak şablonunun başlangıcı:

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

İşte, spark.js'daki notu alan yöntem budur.

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

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

Answer 1

this.notifications doğru yoludur: fications: her şey birbirine app.js bootstrapped nerede burada

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

Ve vardır. Bu tanımlı değilse, bu bileşen için notifications prop iletildi.

Düzenleme: ready() işlevindeki null işlevinin nedeni, bildirimlerin alındığı http isteğinin henüz iade edilmemiş olmasıdır. `Ben` null` olsun; ben `console.log (this.notifications) ne zaman` ready` fonksiyonu üzerinde

Vue.component('spark-notifications', { 

    mixins: [base], 

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

});