Vuetify数据表搜索不起作用-Java 学习之路

我是Vue和Vuetify的新人 . 我在我的项目中使用vuetify数据表 . 除搜索选项外，一切正常 . 我用一切作为文档 . 但仍然没有得到任何解决方案 .

作为基本要求，我使用这些代码添加搜索

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

这是完整的代码https://github.com/Shakilzaman87/pukucrm/blob/master/src/components/sales/Sales.vue

1 回答

Vuetify应该在控制台中警告你：

[Vuetify] Headers 必须具有值属性，该属性对应于“v-data-table”中v模型数组中的值

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

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

（来自您的回购的数据）

回复于 2024-04-25T21:59:51+08:00

Vuetify数据表搜索不起作用

1 回答

相关问题