Question

我想我知道如何监听点击事件，但是我试图确定如何监听bootstrap-daterangepicker插件的自定义事件。

在jquery中，您通常会使用类似以下的内容来监听此事件：

 $('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
          $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
      });

所以根据bootstrap-daterangepicker docs我应该听的事件是apply.daterangepicker。

我认为我需要将事件绑定到我的元素，并假设基于文档的自定义事件是

<date-range-picker v-on:apply.daterangepicker="doSomething"></date-range-picker>

所以在我的Vue组件中，我有这个：

<template>
    <div class="input-group drp-container">
        <input type="text" class="form-control drp" name="daterangepicker">
    </div>
</template>

<script>
  import moment from 'moment';
  import daterangepicker from 'bootstrap-daterangepicker';

export default {
  name: 'date-range-picker',
  data() {
    return {

    }
  },
  mounted() {
      $('.drp').daterangepicker({
          ranges: {
              'Today': [moment(), moment()],
              'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
              'Last 7 Days': [moment().subtract(6, 'days'), moment()],
              'Last 30 Days': [moment().subtract(29, 'days'), moment()],
              'This Month': [moment().startOf('month'), moment().endOf('month')],
              'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
          },
          alwaysShowCalendars: true,
          buttonClasses: "btn",
          applyClass: "btn-brand-green",
          cancelClass: "btn-brand-red",
          showDropdowns: true,
          autoApply: true,
          opens: 'right',
          maxDate: moment()
      });
  },
  methods: {
    doSomething() {
      console.log('do something');
      console.log(picker.startDate);
    }
  }
}

</script>

我只是想弄清当我刚接触Vue时所有这些应该如何工作，所以我很高兴能够在选择日期范围时进行console.log日期记录，但是最终，一个更完整的解决方案将基于DateRangePicker自包含的子组件，该组件将其事件和data（？）传递回父组件。

所以我的快速和肮脏的问题是，如何让它正常工作来console.log选定的值？

最终目标问题是，如何将这个事件发回给父组件，以便我可以对其进行处理。

更新

我已经意识到我将事件绑定放置在组件的主要引用上，而不是放置在基础html元素上，因此，如果我更改了该绑定并仅使用简单的click事件，则可以获取doSomething()至少可以射击的方法，所以这是朝正确方向迈出的一步。

更新2

显然v-on:click有用，但是v-on:change或我尝试的任何其他事件都没有，所以现在我对vue更加困惑。

更新3

找到了this other SO question，但我不确定这是否是正确的方法。它可以工作，但似乎是重复的。我正在mounted()上注册一个调用updateValue（）的事件侦听器，但是它也有v-on:input="updateValue($event.target.value)"。这是正确的吗？这不只是复制事件侦听器吗？

<template>
    <div class="input-group drp-container">
        <input type="text" class="form-control drp" name="daterangepicker" v-bind:value="value" v-on:input="udpateValue($event.target.value)">
    </div>
</template>

<script>
  import moment from 'moment';
  import daterangepicker from 'bootstrap-daterangepicker';

export default {
  name: 'date-range-picker',
  props: {
    value: {
      type: String,
      default: moment().format('MM/DD/YYYY')
    }
  },
  data() {
    return {

    }
  },
  mounted() {
      var self = this;
      $(this.$el).daterangepicker({
          ranges: {
              'Today': [moment(), moment()],
              'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
              'Last 7 Days': [moment().subtract(6, 'days'), moment()],
              'Last 30 Days': [moment().subtract(29, 'days'), moment()],
              'This Month': [moment().startOf('month'), moment().endOf('month')],
              'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
          },
          alwaysShowCalendars: true,
          buttonClasses: "btn",
          applyClass: "btn-brand-green",
          cancelClass: "btn-brand-red",
          showDropdowns: true,
          autoApply: true,
          opens: 'right',
          maxDate: moment()
      }).on('apply.daterangepicker', function(e, picker){
        let start = picker.startDate.format('YYYY-MM-DD');
        let end = picker.endDate.format('YYYY-MM-DD');
        let dates = {};
        dates.start = picker.startDate.format('YYYY-MM-DD');
        dates.end = picker.startDate.format('YYYY-MM-DD');  
        self.updateValue(dates);
      });
  },
  methods: {
    updateValue: function(value) {
      console.log(value);
      //this.$emit('input', dates);
    }
  },
  watch: {

  }
}

</script>

在vue组件中监听apply.daterangepicker事件

0 个答案: