I have been struggling to find a solution for displaying filtered results in my table using Vue.js and Axios. While I am able to filter the results with an if statement, the issue arises when exporting the data as it includes unfiltered results as well.
Currently, I am attempting to filter the Axios response, but the table continues to display all the data from the response. Any alternative methods or suggestions on how to achieve filtered results other than using filter would be greatly appreciated.
Here is my table:
<v-data-table
:headers="headers1"
:items="new_users"
:rows-per-page-items="rowsPerPage"
:search="search"
:loading="true"
class="elevation-1"
item-key="id"
>
<template slot='no-data'>
<v-progress-linear slot='progress' indeterminate></v-progress-linear>
</template>
<template
slot="items" slot-scope="props">
<!-- v-if="props.item.profile_complete === 0"> -->
<td>{{ props.item.gender }}</td>
<td>{{ props.item.msisdn }}</td>
<td>{{ props.item.email }}</td>
<td>{{ props.item.profile_complete }}</td>
Computed property :
computed: {
filteredList() {
let self = this;
this.new_users = this.users_ttl.filter(item => item.profile_complete === 0);
}
},
Method
getUsers () {
axios.get('users')
.then((response) => {
this.users_ttl = response.data.data
this.loopT(response.data.links.next)
this.isLoading = false
})
.catch((error) => {
console.log(error)
this.error = true
})
},