Vue中无法从watch调用loop方法，报错loop未定义

错误出在loop方法内部的递归调用逻辑上：你在forEach中使用普通function作为回调，导致函数内部的this指向脱离了Vue实例，递归时直接调用loop(element, outputArray)，无法找到Vue实例方法列表中的loop，因此抛出未定义错误。

修复方案 #

以下两种方式都可以解决这个问题：

方案1：用箭头函数保留this指向

将forEach的回调替换为箭头函数，箭头函数会继承外层作用域的this（即Vue实例），递归时通过this.loop调用方法：

methods: {
    loop(data, outputArray) {
        data.forEach((element) => {
            if(Array.isArray(element)) {
                this.loop(element, outputArray);
            } else {
                outputArray.push(element);
            }
        });
    },
}

方案2：提前保存Vue实例的this引用

在loop方法开头将Vue实例的this存入变量，后续递归调用时使用该变量：

methods: {
    loop(data, outputArray) {
        const self = this;
        data.forEach(function (element){
            if(Array.isArray(element)) {
                self.loop(element, outputArray);
            } else {
                outputArray.push(element);
            }
        });
    },
}

额外说明 #

你在watch监听器中调用this.loop( sliderImages, this.flattened )的写法是正确的，问题仅存在于loop方法内部的递归逻辑，修复后即可消除报错。

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