Vuejs Bulma Datepicker get value

Question

I am using the bulma vuejs datepicker, but I somehow can't get the value. It keeps returning null. This is the datepicker I use.

My <date-picker> component:

<template>
  <datepicker placeholder="European Format ('d-m-Y')" :config="{ dateFormat: 'd-m-Y', static: true }"></datepicker>
</template>

<script>
import Datepicker from 'vue-bulma-datepicker'

export default {
  components: {
    Datepicker
  }
}
</script>

And this is my vue instance with the axios call:

Vue.component('date-picker', require('./components/Datepicker.vue'));
const app = new Vue({
    el: '#app',

    data: {
        releaseDate: '',
        file: '',
    },

    methods: {
        createGame (e) {
            self = this;
            this.loading = true;
            const fileInput = document.querySelector('#image-upload');
            const formData = new FormData();
            formData.append('image', fileInput.files[0]);
            formData.append('image', this.file);
            formData.append('releaseDate', this.releaseDate);
            axios.post('/games', formData)
            .then((response) => {
                console.log(response.data);
            })
            .catch((error) => {
                console.log(error);
            })
        },

    }
});

<date-picker></date-picker>

Answer 1

Try adding a prop to your <date-picker> component. Two steps:

• Add :value="value" @input="$emit('input', $event)" attributes to the <datepicker> in the template;

• Add props: ['value'], to the JavaScript.

• Result shown below:

    <template>
      <datepicker :value="value" @input="$emit('input', $event)" placeholder="European Format ('d-m-Y')" :config="{ dateFormat: 'd-m-Y', static: true }"></datepicker>
    </template>
  
    <script>
    import Datepicker from 'vue-bulma-datepicker'
  
    export default {
      props: ['value'],
      components: {
        Datepicker
      }
    }
    </script>
  

Now, in the parent, pass the releaseDate as v-model of <date-picker>:

<date-picker v-model="releaseDate"></date-picker>

Passing as v-model will:

• send releaseDate's value to <date-picker>'s internal prop named value; and
• the event @input="$emit('input', $event)" emitted by <date-picker> will update releaseDate.

For more details, see Components - Form Input Components using Custom Events.

At this point, after you pick a date in the datepicker, when you call createGame() of the parent component, the this.releaseDate will have the picked date's value.