我有下一个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
完成数据增量答案 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预期并根据您的要求设置数据和计算属性。