我想我知道如何监听点击事件，但我正在尝试确定如何监听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 文档，我应该监听的事件是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 自包含子组件，它将其事件和数据（？）传递回父组件。
所以我的快速和肮脏的问题是，我怎样才能让它工作到 console.log 选定的值？
最终目标问题是，我怎样才能将此事件发送回父组件，以便我可以用它做点什么。
更新
我已经意识到我将事件绑定放在组件的主引用上，而不是放在底层的 html 元素上，所以如果我改变它并只使用一个简单的点击事件，我doSomething()至少可以让方法触发，所以这就是在正确方向迈出的一步。
更新 2
显然v-on:click有效，但v-on:change或我尝试的任何其他事件都没有，所以现在我对 vue 感到特别困惑。
更新 3
发现了另一个 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>