如何使Vue的过滤器递归？

Question

我有我需要在不同的组件使用，所以我决定做一个VUE过滤器的功能。问题是，该功能是递归的，它的调用本身，但我不知道如何在Vue公司过滤器做。

事实上，我解决了这个问题，但我不是很满意我的解决方案，在过滤器的参数，我给VUE的实例，然后调用一次从给定的情况下过滤器...

-- component.vue
if (this.$options.filters.arraysAreEquals(array1, array2, this)) {
    console.log("Arrays are equals")
}


-- main.js
Vue.filter('arraysAreEquals', (x, y, self) => {
    if(x.length != y.length){
        return false;
    }
    if(x instanceof Array) {
        if(!(y instanceof Array)){
            return false;
        }
        for(let i = 0; i < x.length; i++) {
            if(!self.$options.filters.arraysAreEquals(x[i], y[i], self)){
                return false;
            }
        }
    } else {
        return x == y;
    }
});

所以我的问题是，我该怎么办递归不给VUE实例（在我的情况self）？谢谢。

Answer 1

首先，我不是一个Vue.js用户，但这样做递归是相当简单的。你面临的问题是由于该函数是匿名的。这些可以通过定义不能递归（当没有分配给手柄像一个变量或名称），因为他们没有句柄调用自理。为了解决这个问题，简单地存储在一个变量第一功能（或创建一个命名函数）。

let filter = (x, y) => {
    if (x.length != y.length) return false;
    if (!(x instanceof Array)) return x == y;
    if (!(y instanceof Array)) return false;

    for (let i = 0; i < x.length; i++) {
        if (!filter(x[i], y[i])) return false;
    }
};

Vue.filter('arraysAreEquals', filter);

通过分配匿名函数的变量，我们创建了一个简单的手柄为我们在函数内部调用。

虽然使用这种方法请记住，你不应该重新分配filter变量，因为这会影响递归调用。

let kaas, other;

kaas = (baas = false) => baas ? 'baas' : kaas(true);
console.log('kaas() //=>', kaas());

other = kaas;
console.log('other() //=>', other());

kaas = true;
try {
  console.log('other() //=>', other());
} catch (error) {
  console.error(error.message);
}