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

Question

我的 vue 项目出错。我使用 computed 返回一个对象。

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

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

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

[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]
    }
}

它工作。我想知道我该如何解决这个问题。Thx

Answer 1

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

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

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

此外，在数组的 forEach 函数中使用 return 并不会真正导致从实际的 getter 函数返回。它只是从内部箭头函数返回。您需要使用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 方法返回 undefined 值，您仍然应该使用 v-if 检查 getOpLog。