web-dev-qa-db-ja.com

Vuetifyデータテーブルの検索が機能しない

IM Vue and Vuetify。プロジェクトでvuetifyデータテーブルを使用します。検索オプションを除くすべてが正常に機能します。すべてをドキュメントとして使用します。しかし、まだ解決策はありません。

基本的な要件として、これらのコードを使用して検索を追加します

テンプレート

          <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"
        >

スクリプト

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

完全なコードを次に示します https://github.com/Shakilzaman87/pukucrm/blob/master/src/components/sales/Sales.vue

vue.jsvuetify.js
6
Shakil Zaman

Vuetifyは、これについてコンソールで警告する必要があります。

[Vuetify]ヘッダーには、「v-data-table」のv-model配列の値に対応するvalueプロパティが必要です

そのため、値を追加して検索オプションを修正できます。

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

（レポからのデータ）

18
Sovalina