如何在VueJS 3中展示PocketBase全部数据？解决单条显示与v-for报错问题

你的问题出在三个关键地方：

1. 数据类型不匹配：你把posts定义成了对象ref({})，但PocketBase返回的records是数组，应该定义为数组类型的响应式变量。
2. 赋值逻辑错误：用forEach循环每次把单个post赋值给posts.value，最后只会保留最后一条数据，直接把整个records数组赋值过去就行。
3. 模板渲染错误：直接访问posts.title是无效的，需要用v-for遍历数组来渲染每一条数据。

修改后的完整代码如下：

模板部分 #

<template>
  <div class="about">
    <h1>This is an about page</h1>

    <!-- 用v-for遍历posts数组，渲染每一条数据 -->
    <div v-for="post in posts" :key="post.id">
      <p>{{ post.title }}</p>
    </div>
   
    <button @click="loadPosts">Load</button>
  </div>
</template>

脚本部分 #

<script setup>
import { ref } from 'vue'
import client from '@/module/pb.js'

// 把posts定义为数组类型的响应式变量
const posts = ref([])

async function loadPosts() {
  const records = await client.records.getFullList('posts', 200, {
      sort: '-created',
  });

  // 直接将整个records数组赋值给posts.value
  posts.value = records

  console.log(records)
}
</script>

关键修改说明：

• 将const posts = ref({})改为const posts = ref([])，让它适配数组类型的返回数据
• 移除无效的forEach循环，直接通过posts.value = records接收所有返回数据
• 模板中用v-for遍历数组，通过:key="post.id"给每个循环项设置唯一标识，确保Vue正确追踪列表项变化

这样就能正常展示PocketBase返回的全部数据了。

内容的提问来源于stack exchange，提问作者John Doe