Vuejs：计算属性不更新视图

Posted 2023-02-22

【中文标题】Vuejs：计算属性不更新视图

【英文标题】：Vuejs: Computed property not updating the view

【发布时间】：2018-12-11 04:08:32

【问题描述】：

我正在处理时间表应用程序的工资单部分。提交时间表时，它有许多工作班次，每个班次在 Vue 中表示为 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) : '';
    

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

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

【参考方案1】：

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

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

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

【讨论】：

谢谢 puelo，我可能需要很长时间才能找到答案。我现在要提出第二个问题，问它为什么会这样。