Как узнать выбранное значение v-календаря | Vue.js?

Я новичок в Vue.js и мне нужен совет.

У меня есть компонент (Navbar) с 2 элементами. Первый — v-calendar, второй — простая кнопка. Когда пользователь нажимает кнопку, я хочу знать выбранное значение виджета v-календаря.

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
person Nurzhan Nogerbek    schedule 22.12.2018    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Наконец я нашел решение:

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

search: function () {
   console.log(this.range.start);
   console.log(this.range.end);
}
person Nurzhan Nogerbek    schedule 22.12.2018

arrow_upward
-1
arrow_downward

Вы можете улучшить синтаксис:

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

methods:{
    search() {
      console.log({ start: this.range.start, end: this.range.end })
    }
}
person Chris    schedule 01.06.2020