VueJS - Применение фильтров на лету

VueJS - Применение фильтров на лету

На этой неделе у меня была задача: отфильтровать список с помощью динамического фильтра.

Что я имею в виду?
Учитывая список (например, [1,2,3,4,5]), я хочу применить к нему фильтр, и фильтр может быть ничем (пустой массив) или набором фильтров (например, отфильтровать нечетные числа и отфильтровать числа больше 2 [у нас здесь два фильтра, ребята]).

Очевидно, первым делом я подумал о проблеме и о том, как ее решить. У меня возникла идея, и я создал эту структуру, чтобы помочь мне:

Основная идея здесь - создать объект, в котором я могу создать настраиваемый фильтр с идентификатором, массивом аргументов и функцией. Довольно круто (и просто), правда?

Следующим шагом было создание функции VueJS Filter, которую я мог использовать в инструкции v-for:

{
    id: String, // identifier
    args: Array, // argument array
    func: Function // a function a.k.a the filter.
}

Нам осталось сделать две вещи: использовать фильтр в нашем экземпляре Vue и увидеть реальный пример его работы. Итак, вот что я сделал:

Vue.filter('formatResult', function(value, functionArray) {
    if (functionArray) {
        let rList = value,
            aux = [];
        for (let i = 0, total = functionArray.length; i < total; i++) {
            aux = [rList].concat((functionArray[i]).args);
            rList = (functionArray[i]).func.apply(null, aux);
        }
        return rList;
    }
    return value; 
});

И последний по порядку но не по значимости:

<li v-for="item in list | formatResult filters> {{item}} </li>

Полный пример можно увидеть здесь.