Nuxt•12mo ago

Calling Array.slice() to a fetched array says that slice is not a function

This is what's causing the problem, from what I've understood is that the array is wrapped in a proxy object. I've tried accessing the _rawValue and it worked for a while but it shouldn't be used.

<script setup>
const { data: posts } = useFetch("https://jsonplaceholder.typicode.com/posts")

const postsPerPage = 10
const currentPostIndex = ref(0)

const paginated = computed(() => posts.slice(currentPostIndex.value, currentPostIndex.value + postsPerPage))
...

<script setup>
const { data: posts } = useFetch("https://jsonplaceholder.typicode.com/posts")

const postsPerPage = 10
const currentPostIndex = ref(0)

const paginated = computed(() => posts.slice(currentPostIndex.value, currentPostIndex.value + postsPerPage))
...

This is the error:

Uncaught (in promise) TypeError: posts.slice is not a function
    NuxtJS 6
index.vue:7:40

Uncaught (in promise) TypeError: posts.slice is not a function
    NuxtJS 6
index.vue:7:40

kapa.ai•1/12/25, 12:21 PM

Hi @jonspe. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•1/12/25, 12:21 PM

----------------------
The issue you're experiencing is related to how

useFetch

useFetch

returns data in Nuxt 3. The

data

data

returned by

useFetch

useFetch

is indeed wrapped in a reactive ref, which is why you're encountering the error when trying to call directly on .

To resolve this issue, you need to access the actual array value inside the ref. Here's how you can modify your code to make it work:

The key change here is using instead of just . This accesses the actual array value inside the reactive ref.

Additionally, I've added a optional chaining operator () to safely handle the case where might be

null

null

undefined

undefined

during initial rendering or if the fetch fails.

This approach is consistent with the Nuxt 3 documentation on using

useFetch

useFetch

. As mentioned in the Nuxt 3 Data Fetching documentation, the data returned by

useFetch

useFetch

is a ref, and you need to use to access its contents.

If you're still encountering issues, make sure that the data returned from the API is indeed an array. You can check this by logging to the console after the fetch completes.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•1/12/25, 12:21 PM

@165887165736157185 Kapa.ai is still learning and improving, please let me know how I did by reacting below.