[英]How to catch events is vue.js v-calendar
我正在使用 vuejs v-calender插件,所以我有一个日期范围选择器。 这一切都很好,我可以 select 日期,但就是这样。
我想要做的只是注销选定的日期,以便稍后我可以将它们存储在数据库中,更新表单等,但我不知道如何实现这一点。 我在文档中找不到有关如何执行此操作的任何示例。
有谁知道如何获取选定日期范围的开始和结束日期?
这是我到目前为止所拥有的...
<template>
<v-date-picker mode='range' v-model='range' is-inline :columns="$screens({ default: 1, lg: 2 })" />
</template>
<script>
import { DatePicker } from 'v-calendar'
export default {
name: 'Booking',
components: {
DatePicker
},
data() {
return {
range: {
start: new Date(),
end: null
}
}
},
mounted() {
this.$root.$on('input', (value) => {
console.log('dxggdfg');
});
}
}
</script>
添加输入事件
<v-date-picker mode='range' v-model='range' @input="onDateRangeChange" is-inline :columns="$screens({ default: 1, lg: 2 })" />
{
...
methods: {
onDateRangeChange() {
console.log(this.range)
}
},
mounted() {
this.$root.$on('input', (value) => {
console.log('dxggdfg');
});
}
}
或者,您可以使用watch
,如果您还从外部更新您的 v-model,则效果很好:
{
...
watch: {
range: {
handler: function () {
console.log(this.range)
},
deep: true
}
},
mounted() {
this.$root.$on('input', (value) => {
console.log('dxggdfg');
});
}
}
对我来说,它与@input
一起使用
例如:
<date-picker mode='range' v-model='range' is-range class="m-auto" @input="changeDate"/>
然后,在方法中,我只有一个名为“changeDate”的方法。 一旦在日期范围中选择了第二个日期,这将被调用。
computed: { dateRange: { set (val) { // action after date change here }, get () { let range = { start: new Date(moment().subtract(7, 'day').format('YYYY-MM-DD')), end: new Date(moment().format('YYYY-MM-DD')) } // action after receives date from props return range } } }
<v-date-picker:columns="$screens({ default: 1, lg: 2 })" is-range:value="dateRange":attributes="attrs":max-date='new Date()' v-model="dateRange" />
您可以通过计算获得结果,我在 data() 上浪费了很多时间,但它对我不起作用
偶然发现了这一点-希望对其他人有所帮助。 仅使用单个日期时,您可以像这样进行设置。
<v-date-picker
is-expanded
:columns="$screens({ default: 1, lg: 2 })"
:attributes="calendar.attributes"
v-model="calendar.today"
@dayclick="changeDate"
/>
...
methods: {
changeDate() {
console.log('changeDate called');
// emit your own event or ??
},
}
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.