I have a table like this , I want when I clicked on filter Button alll items that both male and valid are true to be filtered .

users = [
    { name: 'ali', male: true, valid: true },
    { name: 'kevin', male: true, valid: false },
    { name: 'meri', male: false, valid: false }
  ]
  get headerst() {
    return [
      {
        text: 'user',
        align: 'start',

        value: 'name'
      },
      {
        text: 'male',
        value: 'male'
      },
      {
        text: 'valid',
        value: 'valid'
      }
    ]
  }
  filterOnlyCapsText(value, search, item) {
    return (
      value != null &&  typeof value === 'boolean' && value===true
    )
  }
  filter(){
  // i dont know
  }

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<v-btn @click="filter">filter</v-btn>
    <v-data-table
     
      :headers="headerst"
      :items="users"
      item-key="name"
      
      :custom-filter="filterOnlyCapsText"
    >
 
 
    </v-data-table>

I have written code but it doesn't work .

How can fix this ??

this text is nothing just to avoid stack error this text is nothing just to avoid stack error this text is nothing just to avoid stack error this text is nothing just to avoid stack error

CodePudding user response：

To do that, you will need to update your filter method to return this:

return value != null &&
        search != null &&
        typeof value === 'string' &&
        value.toString().toLowerCase().indexOf(search.toLowerCase()) !== -1 && 
        item.male === true && 
        item.valid === true;

This means that from item you can read male and valid properties to match. Also this line value.toString().toLowerCase().indexOf(search.toLowerCase()) !== -1 will make sure that searched text matches value.

Also, if you want to have a button that you can click and filter only those that are male and valid, then you need to create a computed property called filteredUsers, that will look like this:

filteredUsers(){
      if(this.onlyValidAndMale){
        return this.users.filter(user => user.male == true && user.valid == true)
      }
      
      return this.users;
    },

Notice that there is this onlyValidAndMale property there, that you need to define in data().

When you have that, you should be using that filteredUsers as a :items in your table.

You should create one button that would be switching this property onlyValidAndMale to true and false when clicked, and it can look like this:

 <v-btn @click="onlyValidAndMale = !onlyValidAndMale">Click here to filter only those that are male and valid.</v-btn>

Complete working example is here:

https://codepen.io/vokekaw624/pen/GROgJVP

HTML FILE:

<div id="app">
  <v-app id="inspire">
    <div>
      <v-data-table
        :headers="headers"
        :items="filteredUsers"
        item-key="name"
        
        :search="search"
        :custom-filter="filterOnlyMaleAndValid"
      >
        <template v-slot:top>
          <v-text-field
            v-model="search"
            label="Search (Will match only male = true and valid = true)"
            
          ></v-text-field>
        </template>
      </v-data-table>
    </div>
        <v-btn @click="onlyValidAndMale = !onlyValidAndMale">Click here to filter only those that are male and valid.</v-btn>
  </v-app>
</div>

JS FILE:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      search: '',
      onlyValidAndMale: false,
      users: [
    { name: 'ali', male: true, valid: true },
    { name: 'muhamed', male: true, valid: true },
    { name: 'sami', male: true, valid: true },
    { name: 'kevin', male: true, valid: false },
    { name: 'meri', male: false, valid: false }
  ],
    }
  },
  computed: {
    filteredUsers(){
      if(this.onlyValidAndMale){
        return this.users.filter(user => user.male == true && user.valid == true)
      }
      
      return this.users;
    },
    headers () {
      return [
      {
        text: 'user',
        align: 'start',

        value: 'name'
      },
      {
        text: 'male',
        value: 'male'
      },
      {
        text: 'valid',
        value: 'valid'
      }
    ]
    },
  },
  methods: {
    filterOnlyMaleAndValid (value, search, item) {
      return value != null &&
        search != null &&
        typeof value === 'string' &&
        value.toString().toLowerCase().indexOf(search.toLowerCase()) !== -1 && 
        item.male === true && 
        item.valid === true;
    },
  },
})

Notice that I updated the name of the filter method to better match what it does, but it works just as expected.