web-dev-qa-db-fra.com

La recherche dans les tableaux de données Vuetify ne fonctionne pas

Je suis nouveau dans Vue et Vuetify. J'utilise la table de données vuetify dans mon projet. Tout fonctionne bien sauf les options de recherche. J'utilise tout comme documentation. Mais je n'ai toujours pas de solution.

Comme exigences de base, j'utilise ces codes pour ajouter une recherche

Modèle 

          <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: '',
      }
  }

Voici le code complet https://github.com/Shakilzaman87/pukucrm/blob/master/src/components/sales/Sales.vue

vue.jsvuetify.js
6
Shakil Zaman

Vuetify devrait vous avertir dans la console à ce sujet:

[Vuetify] Les en-têtes doivent avoir une propriété value qui correspond à une valeur dans le tableau v-model dans "v-data-table"

Vous pouvez donc corriger l'option de recherche en ajoutant des valeurs:

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' }
]

(données de votre repo)

18
Sovalina