Watching the Event Emission

[jonnycraze]

I'm still learning view so please excuse my ignorance if this is overly obvious.

Currently I'm trying to watch the event emissions like so on my component:

this.$on('paypal-paymentAuthorized', data => { console.log('authorized:') console.log(data) })

however i have all 3 set up and haven't been able to get one to work yet. could you help me understand what i'm doing wrong.

[cocoastorm]

Hey, sorry for the late reply.

I tend to specify a method name when using the v-on directive. So somewhere in your component template markup, you would specify the paypal-checkout component

<div id="app">
  <paypal-checkout
    amount="10.00"
    currency="USD"
    v-bind:client="paypal"
    v-on:paypal-paymentAuthorized="logAuthPayment">
  </paypal-checkout>
</div>

Notice how there's a v-on property that's binding to the paypal-paymentAuthorized event which then receives the method name where you can process the event emission with the response payload.

methods: {
  logAuthPayment: function (data) {
   console.log(data)
  }
}

Here's a jsfiddle I quickly made which you can reference.

Note: The PayPal Checkout doesn't work in jsfiddle as the paypal-checkout component needs to be loaded in the same window. However, jsfiddle (I believe) uses an iframe for their result window.

Additionally if you're using vue-loader and single file components the component may not be called <paypal-checkout>

Some Vue.js Docs that could be helpful in terms of handling (custom) events:

Event Handling Custom Events