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