我已经在以下问题上纠结了很长一段时间,但似乎找不到我做错了什么。
我正在构建一个 Nuxt/Vue 应用程序,我想显示从后端/数据库获取的用户列表。
我可以获取用户列表并显示它,但现在我想实现分页和过滤。
因此我有以下组件(简化):
<script setup lang="ts">
interface UserDTO {
id: Number,
name: String,
email: String,
roles: String,
created_at: String,
updated_at: String
}
// const data = shallowRef<UserDTO[]>([
// {
// "id": 1,
// "email": "[email protected]",
// "name": "Admin",
// "roles": "admin",
// "created_at": "2024-11-01T04:44:41.000Z",
// "updated_at": "2024-11-01T04:44:41.251Z"
// }
// ])
const { data } = await useFetch<UserDTO[]>('/api/users')
const search = ref('')
const page = ref(1)
const itemsPerPage = ref(10)
const filteredList = computed(() => {
const users = data.value
if (!users) { return [] }
const query = search.value.toLowerCase()
if (query.trim() === "") {
return data
}
return users.filter((user) => {
return (
user.name.toLowerCase().includes(query) ||
user.email.toLowerCase().includes(query) ||
user.roles.toLowerCase().includes(query)
)
})
})
const displayList = computed(() => {
return filteredList.value.slice(startIndex.value, endIndex.value)
})
const displayStartIndex = computed(() => {
if (filteredList.value.length === 0) {
return 0
}
return startIndex.value + 1
})
const startIndex = computed(() => {
return (page.value - 1) * itemsPerPage.value
})
const endIndex = computed(() => {
return Math.min(
filteredList.value.length,
startIndex.value + itemsPerPage.value
)
})
const pageTotal = computed(() => {
return Math.max(
1,
Math.ceil(filteredList.value.length / itemsPerPage.value)
)
})
</script>
<template>
<div>
<input
type="text"
class="form-control"
placeholder="Search…"
v-model="search"
autocomplete="off"
/>
<select class="form-select" v-model="itemsPerPage">
<option>10</option>
<option>20</option>
<option>50</option>
<option>100</option>
</select>
entries
<table>
<tbody>
<tr v-for="(user, index) in displayList" :key="index">
<td>
{{ user.name }}
</td>
<td class="text-secondary">
{{ user.email }}
</td>
<td class="text-secondary">
{{ user.roles }}
</td>
<td class="text-secondary">
{{ user.created_at }}
</td>
<td class="text-secondary">
{{ user.updated_at }}
</td>
</tr>
<tr v-if="filteredList.length === 0">
<td colspan="5">
No users to show
</td>
</tr>
</tbody>
</table>
<p>
Showing {{ displayStartIndex }} to {{ endIndex }} of
{{ filteredList.length }} entries
</p>
</div>
</template>
但是我在
filteredList.value
上遇到错误,例如 slice
或 length
不是函数
当我评论失败的行并检查时,我可以看到计算的属性是一个数组
我错过了什么?
问题通常出在键盘和椅子之间。
用
return data
替换 return users
修复了它。
谢谢您指出。