Vuejs:计算属性不更新视图 [英] Vuejs: Computed property not updating the view

问题描述

我正在处理时间表申请的工资部分.提交时间表时，它有多个工作班次，每个班次在 Vue 中都表示为 Shift 组件的一个实例.

I am working on the payroll part of a time sheet application. When a time sheet is submitted it has a number of worked shifts, and each of these is represented in Vue as an instance of the Shift component.

Shift 组件具有付费开始时间"和付费完成时间".它还应该显示工作时间".

The Shift component has a 'paid start time', and a 'paid finish time'. It should also show the 'worked hours'.

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

When the app is first loaded, the worked hours show correctly. However, when the start or finish times are updated, the worked hours are not recalculated.

这是来自 Shift 组件的模板的相关部分:

Here's the relevant part of the template from the Shift component:

<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 绑定到计算属性，如下所示.

As you can see, the times are broken in to separate values for 'hours' and 'minutes'. These are bound with v-model to computed properties, as follows.

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

如您所见，计算出的 setter 更新了真实的模型属性，paidStart 和 paidFinish.在上面的代码中，您还可以看到 workedHours 是基于这两个值的 getter.

As you can see, the computed setters update the real model properties, paidStart and paidFinish. In the code above you can also see that workedHours is a getter based on these two values.

那么，当我更新开始或结束时间(或分钟)时，为什么工作时间没有更新?我认为可能与异步更新队列有关，https://vuejs.org/v2/guide/reactivity.html#Async-Update-Queue，但如果我要使用 nextTick()，我该怎么做?它会调用什么函数?

So, when I update the start or finish hours (or minutes), why does worked hours not update? I thought it might be related to the async update queue, https://vuejs.org/v2/guide/reactivity.html#Async-Update-Queue, but if I was going to use nextTick(), how would I do that? What function would it call?

推荐答案

问题在于观察 moment 的变化.我真的不能告诉你为什么会发生这种情况，但基本上 VueJS 不会接受你对原始时刻对象所做的更改.您可能已经考虑过这一点，因为您尝试在 setter 中重新分配对象.可悲的是文档(https://momentjs.com/docs/#/get-set/) 声明:

The problem is with watching moment for changes. I cannot really tell you why exactly this happens, but basically VueJS does not pick up changes you make to the original moment object. You may have already thought about that because you try to assign the object anew in the setters. Sadly the documentation (https://momentjs.com/docs/#/get-set/) states that:

注意:所有这些方法在用作二传手.

Note: All of these methods mutate the original moment when used as setters.

这意味着您需要使用添加到原始时刻对象的值来构造一个新的时刻对象.可能有更好的解决方案，让 VueJS 获取对 moment 对象所做的更改，但遗憾的是我无法提供.

This means you need to construct a new moment object with the value added to the original moment object. There might be a better solution where VueJS does pick up changes made to the moment object, but i sadly cannot provide that.

这篇关于Vuejs:计算属性不更新视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！