pass certain value dynamically to computed function in Vue.js - laravel

Question

Im trying to pass an id with the v-model so i can pass that to my computed function. The purpose of my function is to dynamically filter a table without hardcoding the names in the function. The function has to be able to filter both select boxes.
my data is called guides, it has an title/active/language_id/group.
this is my html dropdown:
<select v-model="filterResult" :id="language.id" class="select2-selection custom-select">
<option value="">All</option>
<option v-for="language in languages" v-bind:key="language.id" v-bind:value="language.id">{{ language.name }}</option>
</select>
<select v-model="filterResult" :id="active" class="select2-selection custom-select">
<option value="">All</option>
<option :value=1>Active</option>
<option :value=2>Archived</option>
</select>
Here is my computed function now, but as u can see the "language.id" is hard coded in but i want the function to read it out of <select>. what i tried is putting it in the :id="" but i have no idea to forward it to the function besides the v-model. Purpose of all this is so i can reuse the component without changing anything. So it has to be applied to both select boxes or even more in the future.
filterCertainValue: function (evt) {
if (!this.filterResult) return this.guides;
return this.guides.filter(guide => {
if (guide.language.id == this.filterResult) {
return guide.language.id;
}
})
},

Answer 1

You could create a dynamic filter key that changes based on the last selected <select>:
Create a data property (named "filterKey"):
export default {
data() {
return {
filterKey: null
}
}
}
Add a change-event handler to each <select> to set filterKey to the desired key to use in the computed prop's filtering (e.g., language_id or active):
<select #change="filterKey = 'language_id'">
<!-- language_id options -->
</select>
<select #change="filterKey = 'active'">
<!-- active options -->
</select>
Update the computed prop's filter to use the filterKey:
computed: {
filterCertainValue() {
if (!this.filterResult) return this.guides
👇
return this.guides.filter(guide => guide[this.filterKey] === this.filterResult)
}
},
demo