I am working on code that filters a table based on user input. The process involves selecting a column from a drop-down menu, choosing an operator from another drop-down menu, and entering a search value. I want to filter the table based on these criteria.
Here is the filtering setup:
// Select column name
<select class="dv-header-select" v-model="query.search_column">
<option v-for="column in columns" :value="column">{{column}}</option>
</select>
// Select condition(<,>,<=,>=)
<select class="dv-header-select" v-model="query.search_operator">
<option v-for="(value, key) in operators" :value="key">{{value}}</option>
</select>
// Search value
<input type="text" class="dv-header-input" placeholder="Search"
v-model="query.search_input">
To understand the logic behind this code, please refer to the comments provided.
<tr v-for="row in getSearchedRow">
<td v-for="(value, key) in row">{{value}}</td>
</tr>
For the JavaScript section:
data() {
return {
model: { data: [] },
// populating on API call
columns: {},
query: {
search_column: 'id',
search_operator: 'equal',
search_input: ''
}
},
getSearchedRow: function() {
return this.model.data.filter(row => {
let value = row[this.query.search_column];
for(var key in row){
if(String(row[key]).indexOf(this.query.search_input) !== -1){
// Return true required to populate table
if(this.query.search_column.length < 1) {
return true;
}
// when condition gets here, The table shows 0 records
if(this.query.search_operator == 'less_than') {
return value < this.query.search_input;
}
}
}
});
}
The table gets populated initially but appears empty when the second if() statement is reached.
What could be causing this issue?