Vue组件调用Yotpo initWidgets()提示不是函数的问题求助

你遇到的核心矛盾是：控制台能看到window.yotpoWidgetsContainer存在且包含initWidgets方法，但调用时却报错该方法不是函数。结合你的代码，可从以下方向排查修复：

1. 修复递归逻辑的变量错误 #

你的initializeYotpoWidget方法里误用了未定义的attempt变量，应该是笔误写成i。这个错误会导致递归逻辑异常，要么无限重试，要么提前终止，同时掩盖了真正的时机问题。

修正后的代码：

initializeYotpoWidget(count) {
    let i = count;
    try {
        // 先确认方法是可调用函数再执行
        if (typeof window.yotpoWidgetsContainer.initWidgets === 'function') {
            window.yotpoWidgetsContainer.initWidgets();
        } else {
            throw new Error("initWidgets 尚未成为可调用函数");
        }
    } catch (e) {
        console.log(e);
        if (i >= 5) {
            return;
        }
        // 改用setTimeout避免同步递归栈溢出，同时给Yotpo更多加载缓冲时间
        setTimeout(() => this.initializeYotpoWidget(i + 1), 500);
    }
}

2. 确保Yotpo对象真正就绪 #

控制台打印window.yotpoWidgetsContainer时，可能是在方法加载完成之后，但你的代码执行时，该对象可能只是初始化了空壳，initWidgets还没被赋值为真正的函数。

优化子组件的检测逻辑 #

把简单的对象存在检测，改成轮询检测方法是否为可调用函数，确保触发事件时方法已经就绪：

mounted() {
    const yotpoCheckInterval = setInterval(() => {
        // 严格检查方法类型
        if (window.yotpoWidgetsContainer && typeof window.yotpoWidgetsContainer.initWidgets === 'function') {
            clearInterval(yotpoCheckInterval);
            this.$emit('widgetsContainerLoaded');
        }
    }, 300);

    // 10秒超时后停止轮询，避免内存泄漏
    setTimeout(() => clearInterval(yotpoCheckInterval), 10000);
}

3. 优先使用Yotpo官方加载回调 #

第三方SDK通常会提供加载完成的钩子，Yotpo也支持直接监听加载事件，比自行检测更可靠：

// 在父组件mounted中添加
mounted() {
    // 监听Yotpo全局加载完成事件
    window.Yotpo?.on('load', () => {
        window.yotpoWidgetsContainer.initWidgets();
    });
}

4. 匹配Vue组件的DOM渲染时机 #

如果评论组件是动态渲染（比如通过v-if控制显示），需要确保调用initWidgets时，组件DOM已经完全挂载到页面。可在父组件的$nextTick中执行初始化：

initializeYotpoWidget(count) {
    let i = count;
    this.$nextTick(() => {
        try {
            if (typeof window.yotpoWidgetsContainer.initWidgets === 'function') {
                window.yotpoWidgetsContainer.initWidgets();
            } else {
                throw new Error("方法未就绪");
            }
        } catch (e) {
            console.log(e);
            if (i < 5) {
                setTimeout(() => this.initializeYotpoWidget(i + 1), 500);
            }
        }
    });
}

内容的提问来源于stack exchange，提问作者tx291