VueJS filterBy with dynamic argument - vue.js

Question

I have a VueJS object with data that looks like the following:
phases: [
{ id: 1, ... },
{ id: 2, ... },
{ id: 3, ... },
],
roles: [
{ phaseId: 1, title: "Account Manager" },
{ phaseId: 1, title: "Creative Director" },
{ phaseId: 2, title: "Account Manager" },
{ phaseId: 2, title: "Creative Director" },
]
And my v-for loop looks like the following:
<article v-for="phase in phases" class="phase">
... Other content ...
<div v-for="role in roles | filterBy phase.id in 'phaseId' ">
<p>${role.title}</p>
</div>
</article>
I'm trying to filter the roles array to only show roles with the "parent" phase given by the ID. Since the roles for-loop will be running multiple times, each time it will only show the appropriate roles.
Is there any way to accomplish this?

Answer 1

+1 #gurghet, filters are deprecated.
Use a method
data: {
phases: [
{ id: 1, ... },
{ id: 2, ... },
{ id: 3, ... },
],
roles: [
{ phaseId: 1, title: "Account Manager" },
{ phaseId: 1, title: "Creative Director" },
{ phaseId: 2, title: "Account Manager" },
{ phaseId: 2, title: "Creative Director" },
]
},
methods: {
filtered(id){
return this.roles.filter(rol => rol.phaseId === id)
}
}
Template:
<article v-for="phase in phases" class="phase">
... Other content ...
<div v-for="role in filtered(phase.id) ">
<p>${role.title}</p>
</div>
</article>
Exmaple

Answer 2

One can use a mixin that calls the actual filter
1. First we need to register a filter globally
Vue.filter('normalizetext', function (value) {
if (!value) return '';
value = value.toString();
value = value.replace('_', ' ').toLowerCase();
return value.charAt(0).toUpperCase() + value.slice(1);
})
2.Create a mixin
import Vue from 'vue';
export default {
/**
* The methods that the mixin used for filer functions.
*/
methods: {
/**
* Method used to check if specific element is found in an filer
*
* #param {filer} filtername filer to find created filter
*
* #returns {any} filtered output
*/
dynamicFilter(filterName, value) {
return Vue.filter(filterName)(value);
}
}
};
3.Calling filter
<template>
{{
dynamicFilter(data.FilterName, value)
}}
</template>