クリック イベントをリッスンする方法はわかったと思いますが、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 自己完結型の子コンポーネントであり、そのイベントとデータ (?) を親コンポーネントに戻すことに基づいています。
したがって、私の簡単な質問は、選択した値を console.log にするにはどうすればよいでしょうか?
最終目標の質問は、このイベントを親コンポーネントに発行して、それを使って何かを行うにはどうすればよいかということです。
アップデート
基になるhtml要素ではなく、コンポーネントへのメイン参照にイベントバインディングを配置したことに気付きました。それを変更して単純なクリックイベントを使用するだけ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>