vue.js - 如何知道 v-calendar 的选定值 | Vue.js？

Question

我是Vue.js的新手，需要一些建议。

我有Navbar带有 2 个元素的组件 ( )。第一个是v-calendar，第二个是简单的按钮。当用户单击按钮时，我想知道 v-calendar 小部件的选定值。

导航栏.vue：

<template>
    <b-navbar toggleable type="warning" variant="warning">
        <v-date-picker class='v-date-picker'
                       mode='range'
                       v-model='range'
                       :show-day-popover=false
                       is-double-paned
                       show-caps>
        </v-date-picker>
        <b-button class="search-btn" v-on:click="search">
            <font-awesome-icon :icon="faSearch"/>
        </b-button>
    </b-navbar>
</template>

<script>
    import Vue from 'vue';
    import VCalendar from 'v-calendar'
    import 'v-calendar/lib/v-calendar.min.css';
    import {
        FontAwesomeIcon
    } from '@fortawesome/vue-fontawesome'
    import {
        faSearch
    } from '@fortawesome/free-solid-svg-icons'

    Vue.use(VCalendar);

    export default {
        name: "Navbar",
        data() {
            return {
                range: {
                    start: new Date(2018, 0, 16),
                    end: new Date(2018, 0, 19)
                },
                faSearch: faSearch
            }
        },
        components: {
            FontAwesomeIcon
        },
        methods: {
            search: function (event) {

            }
        }
    }
</script>

Answer 1

您可以改进语法：

<b-button @click="search"/>

methods:{
    search() {
      console.log({ start: this.range.start, end: this.range.end })
    }
}

Answer 2

最后我找到了解决方案：

<b-button v-on:click="search"/>

search: function () {
   console.log(this.range.start);
   console.log(this.range.end);
}