Vue: Push to array on event

Question

I have two separate Vue components that need to talk to each other via an eventbus. Like:

form-component.Vue

import events from './events'
export default {
   ...
   methods() {
     sumbitForm() {
       events.$emit('form-submitted', data)
     }
   }
   ...
}

other-component.Vue

import events from './events'
export default {
  ....
  mounted() {
    events.$on('form-submitted, data => {
      this.list.push(data);
    }
  },
  data() {
    return {
      list: []
    }
  }
  ....
}

But when the event is listened to 'this' is not referring to 'other-component' but to the actual eventbus 'events'.

How would I go about this problem?

Sorry, this is just some simplified code I made up to make the problem more focussed. Editing code in the stackoverflow textbox isn't pretty haha — CPN
– CPN, Commented Apr 11, 2018 at 12:14

Roy J · Accepted Answer · 2018-04-11 12:25:56Z

2

It sounds to me like you're misreading the problem. An arrow function binds its context, and the context of that arrow function is correctly bound to the other-component because it is within a method, and methods are auto-bound to their components. The below example works as expected.

const events = new Vue();

Vue.component('formComponent', {
  template: '<button @click="submitForm">Submit</button>',
  methods: {
    submitForm() {
      events.$emit('form-submitted', {
        foo: 1
      });
    }
  }
});

Vue.component('otherComponent', {
  template: '<div><div v-for="item in list">{{item}}</div></div>',
  data() {
    return {
      list: []
    }
  },
  mounted() {
    events.$on('form-submitted', data => {
      this.list.push(data);
    });
  }
});

new Vue({
  el: '#app'
});

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <form-component></form-component>
  <other-component></other-component>
</div>

answered Apr 11, 2018 at 12:25

Roy J

44k10 gold badges84 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CPN Over a year ago

This worked. The problem was that I have an http request after it, wich overrides the array. For some reason if I place it above the event listener it doesnt mess up things.. weird.

Gaurav · Accepted Answer · 2018-04-11 12:21:34Z

0

One solution would be to copy your this in a variable outside and use that to access the component's data properties. For example, this should work:

import events from './events'
export default {
  ....
  mounted() {
    var that = this;
    events.$on('form-submitted, function(data) {
      that.list.push(data);
    )
  },
  data() {
    return {
      list: []
    }
  }
  ....
}

edited Apr 11, 2018 at 12:21

answered Apr 11, 2018 at 12:00

Gaurav

6098 silver badges20 bronze badges

4 Comments

CPN Over a year ago

Just tried this, but still doesnt seem to recognize 'list' as an array. I get ''TypeError: list.push is not a function''.

CPN Over a year ago

When i do something like "that.list = []; that.list.push(data);" it does work, but obviously it overrides any data that i might have had in the array in the first place

Gaurav Over a year ago

Updated the answer, please don't use arrow functions as arrow function binds this to parent context.

Roy J Over a year ago

Arrow functions are fine inside methods. You don't want to use them to define methods or lifecycle hooks.

Collectives™ on Stack Overflow

Vue: Push to array on event

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related