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为空的问题，只有在用户输入后才会获取值，因此我无法对split值undefined执行任何操作。< / p>

有没有办法以更好的方式写出来？

使用moment.js

完成数据增量

Answer 1

您的问题在于this函数中的moment().add范围。

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

类似问题：https://stackoverflow.com/a/40145783/654825

您的代码应如下所示：

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本身中定义依赖关系。
您的数据是一个函数但它没有返回一个对象。应该修改它以返回一个对象，如下面的示例代码所示

需要更改：

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预期并根据您的要求设置数据和计算属性。

我可以将一个值从数据追加到另一个吗？

1 个答案: