How to use open() on vuejs

I’m submitting a … (check one with “x”)

[x] How to trigger open() on vuejs

Tell about your platform

• flatPickr version : 4.0.0
• Vue.js version : 2.1.10
• Browser name and version : Chrome
• This package version : 4.0.0

Current behavior NONE

Expected behavior Trigger flatpickr with custom button

Minimal reproduction of the problem with instructions Below is my code: Index.vue

<template>
<div>
<button @click="chooseBooking" class="btn btn-pink">Book Now</button>
</div>
</template>
<script>
    import flatPickr from 'vue-flatpickr-component';
    import 'flatpickr/dist/flatpickr.css';
    import 'flatpickr/dist/themes/material_blue.css'
    export default {
        components: {
            flatPickr
        },
        data(){
            date: new Date()
        },
        methods: {
                chooseBooking(){
                         // Trigger flatpickr
                }
        }
    }
</script

[ankurk91]

<template>
<div>
<flat-pickr v-model="date" ref="datePicker"></flat-pickr>
<button @click="chooseBooking" class="btn btn-pink">Book Now</button>
</div>
</template>
<script>
    import flatPickr from 'vue-flatpickr-component';
    import 'flatpickr/dist/flatpickr.css';
    import 'flatpickr/dist/themes/material_blue.css'
    export default {
        components: {
            flatPickr
        },
        data() {
           return {
              date: new Date()
          }
        },
        methods: {
                chooseBooking(){
                         // Trigger flatpickr
                   this.$refs.datePicker.fp.open();
                }
        }
    }
</script>

[tamb]

To access the flatPicker methods you need to add a ref to the <flat-pickr ref="myRef">.

Then access the ref this.$refs.myRef

And access the fp instance on that ref this.$refs.myRef.fp

And you can call .open() on that.

this.$refs.myRef.fp.open()