我可以将数据中的一个值附加到另一个值吗？

Question

我有下一个data函数：

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')
}

我需要将 img_startdate 增加到 img_starttime 值。但似乎下一个代码不起作用，因为在控制台上我没有任何数据增量结果。

还有一个问题就是img_starttime是空的，需要用户输入后才能得到值，所以我不能对undefined值做split这样的操作.

有没有更好的写法？

使用 moment.js

完成数据增量

Answer 1

您的问题出在 moment().add 函数中 this 的作用域。

虽然您希望您的 this.img_starttime 引用外部范围，但它实际上是您的 function() {..} 创建的新范围，因此它是 undefined

类似问题：

您的代码应如下所示：

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')
}

或者，您不想使用箭头函数，您可以执行以下操作：

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')
}

希望对您有所帮助！

请注意：我没有使用过moment.add功能，所以我不知道那部分代码是否正确。我的回答仅指出我注意到的范围界定错误。

编辑：附加信息

当我发布答案时，首先引起我注意的是函数范围。今天第二次检查时，我发现其他几个问题：

您应该使用 img_startdate 的计算属性，因为它取决于 img_starttime 属性。您将无法在 data 本身中定义依赖项。
您的数据是一个函数，但它不是 return对象。应该修改为return一个对象，如下面的示例代码所示

需要更改：

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')
    }
}

请注意：我不知道 moment.add 是如何工作的，我从来没有用过它。目前，上面的代码示例仅根据 Vue.js 预期并根据您的要求设置数据和计算属性。

我可以将数据中的一个值附加到另一个值吗？

Can I append one value from data to another?

vue.js