Как развернуть третий компонент VueJS?

Question

Я пытаюсь развернуть компонент Vue с именем: bliblidotcom / vue-rangedate-picker .

Пока что я сделал это: Установленный компонент с использованием npm:

npm install vuejs-datepicker --save

Добавил эти строки в app.js

import Vue from 'vue';
import VueRangedatePicker from 'vue-rangedate-picker';
Vue.use(VueRangedatePicker);

Добавил эту строку в мой компонент: Orders.vue

<rangedate-picker @events="events"></rangedate-picker>

Однако я получаю:

dash.2f99f386cf46c2486e27.js: 51996 [Vue warn]: свойство или метод «events» не определены в экземпляре, но на них ссылаются во время рендеринга.Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство.См .: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

[Vue warn]: Ошибка в nextTick: «Ошибка типа: Ошибка чтения свойства« _withTask »из неопределенного» Ошибка типа: Ошибка чтения свойства «_withTask» из неопределенного

Это внутри Orders.vue:

        </div>
    </div>
</template>
<script>
    export default {
        props: ['initUser'],
        data() {
            return {
                endpoint: '/approve',
                orders: [],
                btn: 'Update List',
                token: "",
                searched_term: "",
                today: false,
                from: "",
            }
        },
        computed: {....

Это внутри app.js:

window.dashApp = new Vue({
    el: '#app',
    mounted(){
        this.$root.$on('mapCreated', function (map) {
            this.currentMap = map;
        });
    },
    data() {
        return {
            currentMap: null
        }
    },....

Answer 1

Вам нужно определить обработчик для вашего события.events не определен в вашем компоненте.На данный момент vue-rangedate-picker поддерживает только выбранное событие

    <rangedate-picker @selected="onSelect"></rangedate-picker>

in Order.vue

    import VueRangedatePicker from 'vue-rangedate-picker';

     ...
    components: {
       'rangedate-picker': VueRangedatePicker
    }
    methods: {
      onSelect(data) {
        console.log(data)
      }
    }