Sign in
Log inSign up

Vuejs accessing data of the component from child method

vijay kumar's photo
vijay kumar
·Jul 15, 2016

I am trying to set notification counter after I get the pusher event , but I failed to call the method from another method in vuejs component. Please help me

I managed to get this to the following code, now it says

Uncaught TypeError: this.newNotification is not a function

 Vue.component('notificationsDropdown', {
    template: '#notifications-list',
    props : ['notifications','unreadNotifications','pusher'],
    ready : function(){

    },
    created : function() {
        this.$http.post(base_url + 'ajax/get-unread-notifications').then((response) => {
            this.unreadNotifications = JSON.parse(response.body).unread_notifications;
        }, (response) => {
              // error callback
        });    
        this.subscribeToChannel(this);
    },
    methods : {
        showNotifications : function()
        {
            this.$http.post(base_url + 'ajax/get-notifications').then((response) => {
                  this.notifications = JSON.parse(response.body).notifications.data;
            }, (response) => {
                  // error callback
            });    
        },
        subscribeToChannel()
        {
            // pusher configuration
            this.pusher = new Pusher(pusherConfig.PUSHER_KEY, {
                encrypted: true,
                auth: {
                    headers: {
                        'X-CSRF-Token': pusherConfig.token
                    },
                    params: {
                        username: "vijay"
                    }
                }
            });

            this.NotificationChannel = this.pusher.subscribe(current_username + '-notification-created');

            this.NotificationChannel.bind('App\\Events\\NotificationPublished', function(data) {
                this.newNotification(data);
            });

        },
        newNotification : function(data) {
            console.log(data);
        },

    }    
});
Hassle-free blogging platform that developers and teams love.
  • Docs by Hashnode
    New
  • Blogs
  • AI Markdown Editor
  • GraphQL APIs
  • Open source Starter-kit

© Hashnode 2024 — LinearBytes Inc.

Privacy PolicyTermsCode of Conduct