How to display Data from PocketBase to VueJS 3

Good day! How do I display all data from PocketBase to VueJS 3

Still new to Vue, Idk why it displays only one data. Tried using v-for but it causes render errors.

Any solutions to this? Thank you.

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

     <p>{{ posts.title }}</p>
   
    <button @click="loadPosts">Load</button>

  </div>
</template>

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

const posts = ref({})

async function loadPosts() {

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

  records.forEach(post => {
    posts.value = post
  });

  console.log(records)

}

</script>

Answer

With

records.forEach(post => {
  posts.value = post
});

you are overwriting post, so at the end you have one value. Try like:

posts.value = records

and then use v-for to show all the posts

Advertisement

Answer