为什么 html 显示计算 属性 返回的对象是“未定义的”？

Question

我的 vue project.I 使用 computed 到 return 对象时出错。

computed: {
        getOpLog() {
            if (this.product_menu) {
                this.product_menu.forEach(opLogItem => {
                    if(opLogItem.id === 'menu_item_oplog') {
                        return opLogItem;
                    }
                });
            }
        }
    },

我的调试器显示我有正确的 return 对象。

但是当我 运行 它在浏览器中时，它就是不起作用。

[Vue warn]: Error in render: "TypeError: Cannot read property 'hidden' of undefined"

这是我的html。

<el-menu-item v-if="getOpLog.hidden" :id="getOpLog.id">
...
</el-menu-item>

但是当我使用这个

getOpLog() {
    if (this.product_menu) {
        return this.product_menu[8]
    }
}

它work.I想知道我该如何修复this.Thx

Answer 1

当 getter 中的 if 条件为 false 即 if (this.product_menu)，则 getter 将 return undefined 对象。因此，Vue.js 抱怨。

作为一个简单的补救措施，在 v-if 中添加额外检查，例如：

<el-menu-item v-if="getOpLog && getOpLog.hidden" :id="getOpLog.id">
...
</el-menu-item>

此外，在数组的 forEach 函数中使用 return 并不会真正导致 return 来自实际的 getter 函数。它只是来自内部箭头函数的 returning 。您需要使用 Array.prototype.find 方法修改您的代码：

computed: {
    getOpLog() {
        if (this.product_menu) {
            const item = this.product_menu.find(opLogItem => {
                return opLogItem.id === 'menu_item_oplog';
            });

            return item;
        }
    }
};

但是，如果 find 方法 returns undefined 值，您仍然应该使用 v-if 检查 getOpLog。