Nuxt/Vue 错误 `slice` 不是计算属性上的函数

问题描述 投票:0回答:1

我已经在以下问题上纠结了很长一段时间,但似乎找不到我做错了什么。

我正在构建一个 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>
    &nbsp;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
不是函数

Error

当我评论失败的行并检查时,我可以看到计算的属性是一个数组

Inspector

我错过了什么?

typescript vue.js nuxt.js
1个回答
0
投票

问题通常出在键盘和椅子之间。

return data
替换
return users
修复了它。

谢谢您指出。

© www.soinside.com 2019 - 2024. All rights reserved.