Vue：VueTools 中的计算属性更改但 UI 未重新渲染

如何解决Vue：VueTools 中的计算属性更改但 UI 未重新渲染

我有以下计算属性：

 maxQuantity() {
        return (
            (this.getProductSelection &&
                this.getProductSelection.reduce(
                    (x,y) => x + parseInt(y.inventory_quantity),0
                )) ||
            ''
        );
    },

在我的模板中，我有：

   <div>Maximum Quantity: {{ maxQuantity }}</div>

我可以调整产品并在 Vuetools 中看到 maxQuantity 计算属性值发生变化，但在我刷新页面之前 UI 不会反映新值。

解决方法

Vue 无法检测属性的添加或删除。由于 Vue 在实例初始化期间执行 getter/setter 转换过程，因此数据对象中必须存在一个属性，以便 Vue 对其进行转换并使其具有反应性。

请参考以下链接

https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats