Vuejs table display axios filtered response

Question

I have been looking for a way to display filtered results in my table using vue js and axios. When i use an if statement on my table, the filtered results are displayed, but the problem comes in when i export the data because all the results, including the ones that are not filtered are extracted. I am now filtering the axios response, but the table displays everything from my response. Any tips on methods i can use other than filter to obtain a filtered result will be appreciated.

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>

My computed property :

computed: {
    filteredList() {
      let self = this;
      this.new_users = this.users_ttl.filter(item => item.profile_complete === 0);
    }
  },

My 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

        })
    },

Could you try to explain your problem a bit better, I don'tt really understand what your exact question is. also your computed property isn't returning anything. shouldnt you return the result of the filter and use filteredList in your items attribute? — Gijs Beijer
– Gijs Beijer, Commented Sep 9, 2020 at 10:20

Tony · Accepted Answer · 2020-09-09 13:28:04Z

1

Your computed property is currently not doing anything. You are not using it in the template. It also does not return a value and data is being mutated in it, which is a bad practice.

Replace the computed property you have with this

computed: {
    filteredList() {
      return this.users_ttl.filter(item => item.profile_complete === 0);
    }
  },

And in your template, you can use the filtered list as follows

<v-data-table
  ...
  :items="filteredList"
  ...
>
...

answered Sep 9, 2020 at 13:28

Tony

1,4423 gold badges11 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vuejs table display axios filtered response

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related