CODEWITHSUNDEEP
vue.jsdatepickervuejs2
tigerel
tigerel

Reputation: 337

Vuejs Bulma Datepicker get value

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>

Upvotes: 1

Views: 1935

Answers (1)

acdcjunior
acdcjunior

Reputation: 135832

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.

Upvotes: 1

Related Questions