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

【问题标题】：Vue: Computed property changes in VueTools but the UI not re-renderingVue：VueTools 中的计算属性更改，但 UI 未重新渲染
【发布时间】：2021-05-10 07:24:40
【问题描述】：

我有以下计算属性：

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

在我的模板中，我有：


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

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

【问题讨论】：

标签： vue.js

【解决方案1】：

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

请参考以下链接

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

【讨论】：