Vuetify data table search by array instead of string

67 Views Asked by At

I'm using Vuetify data table and need to search in it. but the search in vuetify documentation is String. can I set the search to array? I wanna set filters and multiple data to search in the data table. for example, I wanna search x and y at the same time. is it possible to put both in search: [] and bind it to v-data-table search?

<v-data-table v-show="!map"
    :custom-filter="customSearch"
    id="mytable"
    :search="search"
    :headers="headers"
    :items="getcartables.data"
    style="white-space: nowrap; cursor: pointer"
    @dblclick:row="showDetails"
    v-model="selectedRows"
    class="box-shadow mx-5 border-radius-2"
  >
    <template v-slot:item="{ item, index }">
      <tr
        :class="selectedRows.indexOf(item.refrenceEid) > -1 ? 'active' : ''"
        @click="rowClicked(item)"
        @dblclick="showDetails($event, item)"
      >
        <td>
          {{ index + 1 }}
        </td>
        <td>{{ item.demandNumber }}</td>
        <td>{{ item.folderNumber }}</td>
        <td>{{ item.workflowTitle }}</td>
     
      </tr>
    </template>
  
  </v-data-table>

my custom-search(I'm not really using it):

customSearch(value, search, item) {
  return Object.values(item).some(
      (v) => v && v.toString().toLowerCase().includes(search)
  );
},

one of the things I wanna search in cartable is fetched like this from my v-model(I want the search to be like an array to search this renewcode and other v-models at the same time and render table based on these filters) :

 async renewWallPorMishe() {
  let area = this.mantaghe ? this.mantaghe : 0
  let local = this.hoze ? this.hoze : 0
  let block = this.boluk ? this.boluk : 0
  let property = this.melk ? this.melk : 0
  let building = this.sakhteman ? this.sakhteman : 0
  let apartment = this.apartman ? this.apartman : 0
  let guild = this.senf ? this.senf : 0
  this.renewcode =
      area +
      "-" +
      local +
      "-" +
      block +
      "-" +
      property +
      "-" +
      building +
      "-" +
      apartment +
      "-" +
      guild;
  this.search = this.renewcode
  this.renew = true
},
0

There are 0 best solutions below