I am facing an issue with the search functionality in my Vue template. Despite implementing the necessary code, the search feature is not working as expected.
<input type="text" class="dv-header-input" v-model="query.search_input"
@keyup.enter="fetchRecords()">
Here is the table structure:
<tr v-for="row in filteredRow">
<td v-for="(value, key) in row">{{value}}</td>
</tr>
And this is the relevant JavaScript code:
export default {
props: [
'source',
'title',
],
data() {
return {
model: { data: [] },
columns: {},
query: {
search_input: ''
},
}
},
created() {
this.fetchRecords()
},
methods: {
fetchRecords() {
var vm = this
// This is not the original API call
axios.get(/get/Details)
.then(function(response) {
Vue.set(vm.$data, 'model', response.data.model)
Vue.set(vm.$data, 'columns', response.data.columns)
})
.catch(function(response) {
console.log(response)
})
}
},
computed: {
filteredRow: function(){
return this.model.data.filter((row) => {
for(var key in row){
return String(row[key]).indexOf(this.query.search_input);
}
});
}
}
}
While trying to debug, I used
console.log(String(row[key]).indexOf(this.query.search_input))'filteredRow, which returned 30 times 0. I'm unsure about what I might have missed and would appreciate suggestions on the best approach to resolve this.