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

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

0 голосов
/ 22 декабря 2018

Я новичок в 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>

1 Ответ

0 голосов
/ 22 декабря 2018

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

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

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