Question

我正在处理时间表应用程序的薪资部分。提交时间表后，它会有许多工作班次，并且每个工作班次都在Vue中表示为Shift组件的一个实例。

Shift组件具有“付费开始时间”和“付费结束时间”。它还应显示“工作时间”。

首次加载应用程序时，工作时间会正确显示。但是，更新开始时间或结束时间时，不会重新计算工作时间。

这是Shift组件中模板的相关部分：

<td><input type="text" v-model="paidStartHours"> : <input type="text" v-model="paidStartMinutes"></td>
<td><input type="text" v-model="paidFinishHours"> : <input type="text" v-model="paidFinishMinutes"></td>
<td>{{ workedHours }}</td>

如您所见，时间分为“小时”和“分钟”两个单独的值。这些与v-model绑定到计算的属性，如下所示。

computed : {
    paidStartHours : {
        get() {
            return this.paidStart ? this.paidStart.format('HH') : '';
        },
        set(value) {
            this.paidStart = this.paidStart.hour(value);
        }
    },
    paidStartMinutes : {
        get() {
            return this.paidStart ? this.paidStart.format('mm') : '';
        },
        set(value) {
            this.paidStart = this.paidStart.minutes(value);
        }
    },
    paidFinishHours : {
        get() {
            return this.paidFinish ? this.paidFinish.format('HH') : '';
        },
        set(value) {
            this.paidFinish = this.paidFinish.hour(value);
        }
    },
    paidFinishMinutes : {
        get() {
            return this.paidFinish ? this.paidFinish.format('mm') : '';
        },
        set(value) {
            this.paidFinish = this.paidFinish.minutes(value);
        }
    },
    workedHours () {
        return this.paidFinish ? this.paidFinish.diff(this.paidStart, 'hours', true) : '';
    }
}

如您所见，计算的设置器会更新实际模型属性paidStart和paidFinish。在上面的代码中，您还可以看到workedHours是基于这两个值的吸气剂。

因此，当我更新开始或结束时间（或分钟）时，为什么工作时间不更新？我以为它可能与异步更新队列https://vuejs.org/v2/guide/reactivity.html#Async-Update-Queue有关，但是如果我要使用nextTick()，我该怎么做？它会调用什么功能？

Answer 1

问题在于观察moment的变化。我无法真正告诉您为什么会发生这种情况，但是基本上VueJS不会接受您对原始moment对象所做的更改。您可能已经考虑过这一点，因为您尝试在设置器中重新分配对象。可悲的是文档（https://momentjs.com/docs/#/get-set/）指出：

注意：所有这些方法在用作二传手。

这意味着您需要构造一个新的矩对象，并将其值添加到原始矩对象中。 VueJS确实可以收集对矩对象所做的更改，但也许我可以提供一个更好的解决方案。

Vuejs：计算属性不会更新视图

1 个答案: