Почему не работает forEach?

Question

[Lahma]

Получаю ошибку: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'forEach')

<script setup>
import { ref, watchEffect } from 'vue'

const posts = ref()
const database = ref()

watchEffect(async () => {
  const response = await fetch('http://localhost:3000/posts')
  posts.value = await response.json()
})

posts.value.forEach((item) => {
  database.value.push({ id: item.id, name: item.name })
})

</script>

<template>
  <div v-for="item in posts">
    {{ item.name }}
  </div>
</template>

Почему не forEach не работает. Из-за обращения к .value все ломается. Подскажите в чем дело плиз!

Comments

[Антон Антон]

а нафига тут watchEffect?
почему database не computed?

[Lahma]

Антон Антон, это я пробую варианты

Изначально все вот так:

<script setup>
import { useOffsetPagination } from '@vueuse/core'
import { ref, watchEffect } from 'vue'
import { useFetch } from '@vueuse/core'

const database = ref([])

const { data: posts } = useFetch('https://fakestoreapi.com/users').get().json()

posts.value.forEach((item) => {
  database.value.push({ id: item.id, name: item.email })
})

function fetch(page, pageSize) {
  return new Promise((resolve, reject) => {
    const start = (page - 1) * pageSize
    const end = start + pageSize
    setTimeout(() => {
      resolve(database.value.slice(start, end))
    }, 100)
  })
}

const data = ref([])
const page = ref(1)
const pageSize = ref(10)

fetchData({
  currentPage: page.value,
  currentPageSize: pageSize.value,
})

function fetchData({ currentPage, currentPageSize }) {
  fetch(currentPage, currentPageSize).then((responseData) => {
    data.value = responseData
  })
}

const {
  currentPage,
  currentPageSize,
  pageCount,
  isFirstPage,
  isLastPage,
  prev,
  next,
} = useOffsetPagination({
  total: database.value.length,
  page: 1,
  pageSize,
  onPageChange: fetchData,
  onPageSizeChange: fetchData,
})

</script>

<template>
  <div class="my-4">
    <button :disabled="isFirstPage" @click="prev">
      prev
    </button>
    <button
      v-for="item in pageCount"
      :key="item"
      :disabled="currentPage === item"
      @click="currentPage = item"
    >
      {{ item }}
    </button>
    <button :disabled="isLastPage" @click="next">
      next
    </button>
  </div>

  <div v-if="loading">
    loading
  </div>

  <div>
    {{ database }}
  </div>

  <div>
    {{ data }}
  </div>

  <table>
    <thead>
      <tr>
        <td>id</td>
        <td>name</td>
      </tr>
    </thead>
    <tr v-for="d in data" :key="d.id">
      <td>{{ d.id }}</td>
      <td>{{ d.name }}</td>
    </tr>
  </table>
</template>

[Lahma]

Антон Антон, на Nuxt3 работает! А vue не хочет почему то

[Евгений]

Lahma, если не работает выведете в консоль эту переменную, посмотрите может ли она быть iterable.

[Евгений]

Lahma, до конца не могу понять смысл задуманного, но если вам нужно асинхронно получать посты и отображать есть два пути:
1. Показать пустой список, потом грузить посты.
2. Сделать это в beforeMount.

PS: posts.value.forEach() перед явно асинхронной функцией выглядит странно.

[Lahma]

Евгений, ссылка на реализацию в vueUse

Я просто скопировал из документации и вместо статических данные хочу загружать данные

[Евгений]

Lahma, потому что там синхронный код:

for (let i = 0; i < 80; i++)
  database.value.push({ id: i, name: `user ${i}` })

Нужно переделать в асинхронный

Answer 1

[Алексей Ярков]

const posts = ref([]);
const database = ref([]);

Comments

[Lahma]

Не работает

<script setup>
import { useOffsetPagination } from '@vueuse/core'
import { ref, watchEffect } from 'vue'

const posts = ref([])
const database = ref([])
const loading = ref(false)

const postForEach = () => {
  posts.value.forEach((item) => {
      database.value.push({ id: item.id, name: item.email })
    })
}

watchEffect(async () => {
  loading.value = true
  try {
    const response = await fetch('https://fakestoreapi.com/users')
    posts.value = await response.json()

    postForEach()

    loading.value = false
  } catch (err) {
    console.log(err)
  } finally {
    loading.value = false
  }
})

function fetch(page, pageSize) {
  return new Promise((resolve, reject) => {
    const start = (page - 1) * pageSize
    const end = start + pageSize
    setTimeout(() => {
      resolve(database.value.slice(start, end))
    }, 100)
  })
}

const data = ref([])
const page = ref(1)
const pageSize = ref(10)

fetchData({
  currentPage: page.value,
  currentPageSize: pageSize.value,
})

function fetchData({ currentPage, currentPageSize }) {
  fetch(currentPage, currentPageSize).then((responseData) => {
    data.value = responseData
  })
}

const {
  currentPage,
  currentPageSize,
  pageCount,
  isFirstPage,
  isLastPage,
  prev,
  next,
} = useOffsetPagination({
  total: database.value.length,
  page: 1,
  pageSize,
  onPageChange: fetchData,
  onPageSizeChange: fetchData,
})

</script>

<template>
  <div class="my-4">
    <button :disabled="isFirstPage" @click="prev">
      prev
    </button>
    <button
      v-for="item in pageCount"
      :key="item"
      :disabled="currentPage === item"
      @click="currentPage = item"
    >
      {{ item }}
    </button>
    <button :disabled="isLastPage" @click="next">
      next
    </button>
  </div>

  <div v-if="loading">
    loading
  </div>

  <div>
    {{ database }}
  </div>

  <div>
    {{ data }}
  </div>

  <table>
    <thead>
      <tr>
        <td>id</td>
        <td>name</td>
      </tr>
    </thead>
    <tr v-for="d in data" :key="d.id">
      <td>{{ d.id }}</td>
      <td>{{ d.name }}</td>
    </tr>
  </table>
</template>

[Aetae]

Lahma, ты зачем-то заменил fetch на свою непонятную реализацию. Она ничего не фетчит, и не умеет никакого json.
function fetch(page, pageSize) { ...
Именно эта функция вызывается в watchEffect с закономерным результатом(ошибкой).
await fetch('https://fakestoreapi.com/users')

[Lahma]

Aetae, это реализация из документации vueUse вот ссылка

[Aetae]

Lahma, и что? Мозги то свои надо иметь. Ну назвали они сдуру там у себя функцию "fetch", но они, очевидно, не использовали там настоящий оригинальны fetch. А ты попытался. Не может быть в одной области видимости две совершенно разных функции с одинаковым именем.
Как ты это себе представляешь это должно работать? Телепатически лезть в твою голову и узнавать какой именно из fetch ты имел ввиду?

[Lahma]

Aetae, Бро, изначально я использовал import { useFetch } from '@vueuse/core'
const { data: posts } = useFetch('https://fakestoreapi.com/users').get().json()

Ничего не работало. Ну я и начал импровизировать )

Answer 2

[Smirator]

Привет.
Проблема была в том, что posts.value в момент вызова forEach ещё не был инициализирован, так как данные загружаются асинхронно через fetch. Вначале posts.value — это undefined, и из-за этого попытка вызвать forEach на нём вызывала ошибку.

Попробуй такой вариант:

import { ref, watchEffect } from 'vue'

const posts = ref([])
const database = ref([])

watchEffect(async () => {
  const response = await fetch('http://localhost:3000/posts')
  posts.value = await response.json()

  if (posts.value.length) {
    posts.value.forEach((item) => {
      database.value.push({ id: item.id, name: item.name })
    })
  }
})
</script>

<template>
  <div v-for="item in posts" :key="item.id">
    {{ item.name }}
  </div>
</template>

Теперь posts и database изначально инициализированы как пустые массивы, и forEach вызывается только после того, как данные загружены. Ошибка не должна появиться.

Comments

[Lahma]

не завилось ((

[Smirator]

Lahma, Что происходит? Какие ошибки?

[Lahma]

Ошибки

Код

<script setup>
import { useOffsetPagination } from '@vueuse/core'
import { ref, watchEffect } from 'vue'
import { useFetch } from '@vueuse/core'

const posts = ref([])
const database = ref([])

watchEffect(async () => {
  const response = await fetch('https://fakestoreapi.com/users')
  posts.value = await response.json()

  if (posts.value.length) {
    posts.value.forEach((item) => {
      database.value.push({ id: item.id, name: item.username })
    })
  }
})

function fetch(page, pageSize) {
  return new Promise((resolve, reject) => {
    const start = (page - 1) * pageSize
    const end = start + pageSize
    setTimeout(() => {
      resolve(database.value.slice(start, end))
    }, 100)
  })
}

const data = ref([])
const page = ref(1)
const pageSize = ref(10)

fetchData({
  currentPage: page.value,
  currentPageSize: pageSize.value,
})

function fetchData({ currentPage, currentPageSize }) {
  fetch(currentPage, currentPageSize).then((responseData) => {
    data.value = responseData
  })
}

const {
  currentPage,
  currentPageSize,
  pageCount,
  isFirstPage,
  isLastPage,
  prev,
  next,
} = useOffsetPagination({
  total: database.value.length,
  page: 1,
  pageSize,
  onPageChange: fetchData,
  onPageSizeChange: fetchData,
})

</script>

<template>
  <div v-if="loading">
    loading
  </div>

  <div>
    posts: {{ posts }}
  </div>

  <div>
    database: {{ database }}
  </div>

  <div>
    data: {{ data }}
  </div>

  <p>Таблица:</p>
  <table>
    <thead>
      <tr>
        <td>id</td>
        <td>name</td>
      </tr>
    </thead>
    <tr v-for="d in data" :key="d.id">
      <td>{{ d.id }}</td>
      <td>{{ d.username }}</td>
    </tr>
  </table>

  <div class="my-4">
    <button :disabled="isFirstPage" @click="prev">
      prev
    </button>
    <button
      v-for="item in pageCount"
      :key="item"
      :disabled="currentPage === item"
      @click="currentPage = item"
    >
      {{ item }}
    </button>
    <button :disabled="isLastPage" @click="next">
      next
    </button>
  </div>
</template>

[Smirator]

Lahma, URL https://fakestoreapi.com/users возвращает корректный JSON-ответ?

[Lahma]

Smirator,

Какую то ошибку ловит:

Сделал отдельный запрос на этой же странице:

fetch('https://fakestoreapi.com/users')
            .then(res=>res.json())
            .then(json=>console.log(json))

Все работает: