vue.js - Vuetify 数据表搜索不起作用
问题描述
我是 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
解决方案
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' }
]
(来自您的回购的数据)
推荐阅读
- sas - 在 SAS 中生成新变量会导致错误 180-322
- python-3.x - 无法启动 docker `OSError: [Errno 8] Exec format error: '/usr/local/bin/docker-credential-ecr-login'`
- javascript - 将汉堡菜单移动到右侧 react-burger-menu
- kubernetes - 找不到服务“istio-sidecar-injector”
- python - 从数据框列中的字符串中删除 numpy 数组中存在的特定单词?[Python]
- c# - AspNet 核心无法读取 FromQuery 参数
- javascript - 在反应钩子状态不保留其先前的状态
- reactjs - 如何通过在反应中使用onclick按钮将不同的js文件输出调用到另一个js文件
- powershell - 从我的合作伙伴中心帐户/委托帐户连接租户的 Azure AD 时出现错误
- javascript - 无法过滤表中使用 Vue 计算的深层数组对象