Как сделать Vue Filter рекурсивным? - PullRequest
Новая
       15

Как сделать Vue Filter рекурсивным?

0 голосов
/ 01 февраля 2019

У меня была функция, которую мне нужно было использовать в разных компонентах, поэтому я решил создать vue Filter.Проблема в том, что функция рекурсивная, это сам вызов, но я не знаю, как это сделать в Vue Filter.

На самом деле, я решил проблему, но я не очень доволен своим решением.в параметрах фильтра я даю экземпляр 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 в моем случае)?Спасибо тебе.

1 Ответ

0 голосов
/ 01 февраля 2019

Прежде всего, я не пользователь 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);
}
...