我是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
答案 0 :(得分:13)
Vuetify应该在控制台中警告您以下内容:
[Vuetify]标头必须具有与 “ v-data-table”中的v-model数组中的值
因此,您可以通过添加值来修复搜索选项:
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' }
]
(来自您的仓库的数据)