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

Smirator,

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

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

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

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

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

Ошибки

Код

<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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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>

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

Не работает

<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>

Как сделать push своих данный в useOffsetPagination?

Мысль была с помощью .map или .forEach

Как сделать push своих данный в useOffsetPagination?

import { useOffsetPagination } from '@vueuse/core'
import { useFetch } from '@vueuse/core'
import { ref, watchEffect } from 'vue'

const database = ref([])

const url = 'https://fakestoreapi.com/products'

const { data: posts } = useFetch(url).get().json()

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

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,
})

Поиск useFuse или Fuse.js как с ним работать?

Спасибо iljaGolubev
Да все заработало ))) буду внимательнее

Результаты поиска или как настроить выпадающий список?

Круто, спасибо! Оч помогли мне

Поиск на сайте. Как сделать "ничего не найдено"?

Очень спасибо!

Как убрать авто перелистывание слайдера?

Александр, большое спасибо!

Как убрать авто перелистывание слайдера?

Ого ))) сории

Александр, вместо "autoplay: !0"
поставить "autoplay: true" ?

Как убрать авто перелистывание слайдера?

Не нашел такого в коде.

Как изменить порядок блоков в админке WP?

WP Panda, понял, спасибо

Как изменить порядок блоков в админке WP?

Владимир Дружаев, Оказывается можно было ))

Как изменить порядок блоков в админке WP?

Часть перетащил, спасибо. Оказывается просто ручками )

1. НО, есть встроеные программистом блоки такие как "Количество в упаковке" "Действующие вещество" они не переносятся так как стандартные.

2. Не удается поменять местами "Краткое описание товара" и "Основное"