Vue.js Field not set

Question

I am using Vue for a date picker.

I can see the date, can click on it and select it, however when I try to retrieve the date, using the method getDate it is always null .

The code is here if anyone can help that would be great:

var overviewVue;

function initOverviewVue(model) {


    overviewVue = new Vue({
        el: '#overviewVue',
        data: {
            OverviewModel: model,
            repeatSchedule: [],
            startDate: ''
        },
        
       
        methods: {
            setOverviewDatePickers: function (target) {
                var $target = $(target);

                $target.daterangepicker({
                    autoUpdateInput: false,
                    locale: {
                        format: 'DD/M hh:mm',
                        cancelLabel: 'Clear'
                    },
                    timePicker24Hour: true,
                    timePicker: true,
                    singleDatePicker: true,
                    showDropdowns: true
                }, function (chosen_date) {
                    this.startDate = chosen_date.format('DD/MM/YYYY HH:mm');
                    $target.val(this.startDate);
                });
            },
            getDate: function () {
                return this.startDate;
            }
        }
    });
}

Answer 1

I see a couple of problems here.

It looks like the date picker you have selected is a jQuery date picker, ideally you would find a date picker that is built for the Vue ecosystem, like this one . For the sake of this question I will ignore that issue.

In your callback code where you are setting this.startDate the this is not what you think it is because you've gone into another function call.

Try changing your code to an arrow function (assuming you can support arrow functions ) and then this will have the lexical scope you're looking for:

(chosen_date) => {
  this.startDate = chosen_date.format('DD/MM/YYYY HH:mm');
  $target.val(this.startDate);
}

Now this.startDate should be what you think it is. Ideally I would recommend something built for Vue like the recommendation above where you would not run into silly things like this so easily.