如何在Vue.js中获得$ emit Payload的值 [英] How to Get the Values of $emit Payload in Vuejs

问题描述

我是vuejs的新手，必须使用日期范围选择器.我使用的是vue-rangedate-picker，选择日期范围后，会触发$ emit类型的事件，并在事件的有效负载中找到了所需的值，如下所示(事件信息来自vue调试器):

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>

还有脚本

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.

推荐答案

您的函数testDatePicker将以以下形式接收范围:

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

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

或者，如果您愿意:

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.

这篇关于如何在Vue.js中获得$ emit Payload的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！