How to get acces to data from inside function

Hi,
I am using the flatpickr plugin and having trouble. In my returned data I have

 data() {
            return {
                dates: '',
                config: {
                    minDate: "today",
                    mode: "range",
                    inline: false,
                    showMonths: 2,
                    dateFormat: 'Y-m-d H:i:s',
                    onClose: [function(value){
                        const dateArr = value.map(date => this.formatDate(date, "Y-m-d H:i:s"));
                        console.log(dateArr);
                    }] 
                },
            }
        },

The onClose works great and consoles out

0: "2020-01-08 00:00:0"
1: "2020-01-17 00:00:0"

however if I try to do

onClose: [function(value){
                const dateArr = value.map(date => this.formatDate(date, "Y-m-d H:i:s"));
              console.log(dateArr);
              this.dates = dateArr
                    }] 

it returns a string

dates:"2020-01-09 00:00:0 to 2020-01-17 00:00:0"

How do I correctly save the dateArr as an array?

Hi

First. Shouldn’t dates be set to [] as it’s empty value? And second is it set but as a string?;If it’s not set can it be because. this inside the function isn’t pointing to the function but somewhere else. If this is the case you may have to use an arrow function instead which don’t change this. Like

onClose: [(value) => {
  const dateArr = value.map(date => 
    this.formatDate(date, "Y-m-d H:i:s"));
  console.log(dateArr);
  this.dates = dateArr
 }] 

Hi!
Thanks for the response. I switched it to dates: [] and tried around with the arrow function but now I get the error

Uncaught TypeError: _this.formatDate is not a function

Hm. I guess formatDate is a method of something in flatpickr so you have a problem here you both need to let flatpickr set this so it finds the method and then you need to be able to set this.dates.

One way of doing this is to create a function which does two things. First saves the this of the component and the returns a function which can be used by flatpickr. I’m writing this on my mobile so I can’t test it works but it should be something like this:

methods: {
  ...
  makeFunction() {
    // Save component this in that
    const that = this;
    // return function needed
    return function(value) {
        const dateArr = value.map(date => 
            this.formatDate(date, "Y-m-d H:i:s"));
         console.log(dateArr);
         that.dates = dateArr;
        }
    }

Then inside your data function you can call this and it will return a function needed by onClose

onClose: [this.makeFunction()]

OMG you are amazing!! Only one small change, I had to add the this to makefunction.

onClose: [this.makeFunction()]

Thank you so much!!

1 Like

Thanks good you got it working. I added the missing this in the answer. Could you mark it an solution so others will find it easier?

Shouldn’t he also have the function in the methods section?

The makeFunction is in the methods section/part of the component.

1 Like