Can I append one value from data to another?

Question

I have got next data function:

data: function ()  
{
img_starttime: "11:44", // be default it's empty. value only for test
img_startdate: moment(new Date()).add(function () {return this.img_starttime.split(":")[0]}, 'hours')
}

I need to increment img_startdate to img_starttime value. But it's seems that next code do not working, because on console I do not any data increment result.

There is also problem that img_starttime is empty, and it's get value only after user will input it, so I can't do any operation like split on undefined value.

Is there any way to write it's in better way?

Data increment done with moment.js

Answer 1

Your problem is with the scoping of this inside the moment().add function.

While you expect your this.img_starttime to refer to outside scope, it is actually a new scope created by your function() {..} and therefore it is undefined

Similar issue: https://stackoverflow.com/a/40145783/654825

Your code should be as follows:

data: function ()  
{
    img_starttime: "11:44", // be default it's empty. value only for test
    img_startdate: moment(new Date()).add(() => {
        return this.img_starttime.split(":")[0]
    }, 'hours')
}

Alternatively, you do not want to use arrow functions, you may do the following:

data: function ()  
{
    var self = this;  // 'self' points to 'this' of Vue component
    img_starttime: "11:44", // be default it's empty. value only for test
    img_startdate: moment(new Date()).add(() => {
        return self.img_starttime.split(":")[0]  // 'self' is 'this' of outside scope
    }, 'hours')
}

Hope it helps!

Please note: I have not used moment.add function and therefore I do not know if that part of code is correct. My answer only points to the scoping error that I noticed.

Edit: Additional Info

When I posted the answer, the first thing that grabbed my attention was function scope. On second inspection today, I see few other issues:

• you should be using computed properties for img_startdate as it depends on img_starttime property. You will not be able to define the dependency in data itself.
• your data is a function but it is not returning an object. It should be modified to return an object as shown in the sample code below

changes required:

data: function () {
    return {
        img_starttime: "11:44", // be default it's empty. value only for test
    }
},
computed: {
    img_startdate: function() {
        return moment(new Date()).add(() => {
            return this.img_starttime.split(":")[0]
        }, 'hours')
    }
}

Please note: I do not know how moment.add works, it is something I never had to use. Currently the code sample above only sets the data and computed properties as per Vue.js expectations, and based on your requirements.