CODEWITHSUNDEEP
vue.jsevents
Bhanu Prakash
Bhanu Prakash

Reputation: 105

How to Get the Values of $emit Payload in Vuejs

I'm new to vuejs and had to use date range picker. I'm using vue-rangedate-picker and after selecting a date range, $emit type event is fired and I found the required values in the payload of the event as shown below (event info taken from vue debugger):

name: "selected"
type: "$emit"
source: "<vue-rangedate-picker>"
payload: Array[1]
  0: Object
    end: "Fri May 31 2019 05:30:00 GMT+0530 (India Standard Time)"
    start: "Wed May 01 2019 05:30:00 GMT+0530 (India Standard Time)"

I need to get the values in payload so I can assign to variables and use them later. I tried to find the solution for hours and had no luck. Here is the element

<vue-rangedate-picker
  righttoleft="true"
  i18n="EN"
  format="YYYY-MM-DD HH:mm:ss"
  @selected="testDatePicker()"
></vue-rangedate-picker>

And the script

testDatePicker() {
  console.log(/*what should I write here to get the payload?*/);
}

How do I get the payload values so I can assign them to variables? Please help me.

Upvotes: 1

Views: 2378

Answers (1)

Slim
Slim

Reputation: 1276

Your function testDatePicker will receive the range in the following form:

testDatePicker({start, end}) {
  console.log(start, end);
}

or if you prefer:

testDatePicker(range) {
  console.log(range.start, range.end);
}

Also, you should not use parenthesis in the call:

<vue-rangedate-picker
  righttoleft="true"
  i18n="EN"
  format="YYYY-MM-DD HH:mm:ss"
  @selected="testDatePicker"
></vue-rangedate-picker>

Like that, you pass a "reference" to your method, and the component will call it with needed parameters.

Upvotes: 2

Related Questions