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

时间:2016-10-19 19:06:32

标签: vue.js

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

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

使用moment.js

完成数据增量

1 个答案:

答案 0 :(得分: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预期并根据您的要求设置数据和计算属性。