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

【问题标题】：How to know selected value of v-calendar | Vue.js?如何知道 v-calendar 的选定值 | Vue.js？
【发布时间】：2019-05-22 14:19:58
【问题描述】：

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

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

Navbar.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>

【问题讨论】：

标签： vue.js vue-component vcalendar

【解决方案1】：

终于找到了解决办法：

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

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

【讨论】：

【解决方案2】：

你可以改进语法：

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

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

【讨论】：