Vuetify data tables search not working

Question

Im new in Vue and Vuetify. I use vuetify data table in my project. Everything working fine except the Search options. I use everything as the documentation. But still not get any solution.

As the basic requirements I use these code to adding search

Template

          <v-text-field
            v-model="search"
            append-icon="search"
            label="Search"
            single-line
            hide-details
          ></v-text-field>

         <v-data-table
          :headers="headers"
          :items="sales"
          :search="search"
          :rows-per-page-items="rowsPerPageItems"

          row
          wrap
          class="elevation-1"
        >

Script

data(){
      return{
        search: '',
      }
  }

Here is the complete code https://github.com/Shakilzaman87/pukucrm/blob/master/src/components/sales/Sales.vue

Sovalina Sovalina · Accepted Answer · 2018-06-23T15:09:32

Vuetify should warn you in the console about this:

[Vuetify] Headers must have a value property that corresponds to a value in the v-model array in "v-data-table"

So you can fix the search option by adding values:

headers: [
  { text: 'Item Name', value: 'item_name' },
  { text: 'Unit Price', value: 'price' },
  { text: 'Quantity', value: 'quantity' },
  { text: 'Customer', value: 'customer' },
  { text: 'Created', value: 'timestamp' },
  { text: 'Total', value: 'total' },
  { text: 'Action', value: 'item_name' }
]

(data from your repo)

Vuetify data tables search not working

1 Answers