I am seeking ways to enhance the method I utilize for determining which values should be displayed in a table. At present, my table displays various values and is accompanied by input fields. The values chosen in these input fields serve as filters for the content within the table.
<!-- Input Fields -->
<v-select placeholder="Index" :options="indexList" v-model="filterTable['indexedValue']" @input="filteringTable"></v-select>
<v-select placeholder="Domain" :options="domainList" index="index" label="txt" v-model="filterTable['domainValue']" @input="filteringTable"></v-select>
<!-- Table -->
<table>
<tbody>
<tr v-for="(value, i) in filteringTable()" :key="value.id">
...<!-- Values Displayed Here-->
</table>
The selected input field values are linked to the filterTable object.
data () {
return {
filterTable: {}
}
}
The function triggered on input is defined as below:
filterTable () {
var newLinks = this.links // object containing all information to display in the table
if (this.filterTable['indexedValue'] != null && this.filterTable['indexedValue'] !== undefined) {
newLinks = newLinks.filter(l => l.post.indexed === this.filterTable['indexedValue'])
}
if (this.filterTable['domainValue']) {
newLinks = newLinks.filter(l => l.tag.domain === this.filterTable['domainValue'])
}
return newLinks
}
(My code includes 2 additional if statements that check values from other input fields, following the same logic as above)
This implementation successfully filters the table. However, with multiple if statements, I am exploring strategies to optimize and improve efficiency.
I welcome any suggestions or guidance!