Vuetify数据表搜索无法工作

Question

我对Vue和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

- Shakil Zaman

Answer 1

Vuetify应该在控制台中向您发出以下警告：

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

因此，您可以通过添加值来修复搜索选项：

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

(来自您的仓库的数据)

- Sovalina

---

谢谢。我不知道我怎么错过了那个。当我回到例子时，它是我看到的第一件事。 - Rob Gray

love you :) Thank you so much - Lola