As I attempt to create cards for my blog posts, I encountered an issue with a Post component in my code. The cards are displaying like shown in the picture, but without any text. How do I insert text into these cards? Currently, all the text is within attributes. Vue and Nuxt examples I've looked at don't seem to be helpful.
[Vue warn]: Property "title" was accessed during render but is not defined on instance.
[Vue warn]: Property "date" was accessed during render but is not defined on instance.
[Vue warn]: Property "text" was accessed during render but is not defined on instance.
...
<template>
<div class="post"><div><b>{{ title }}</b></div><div><small><i>{{ date }}</i></small></div><div>{{ text }}</div></div>
</template>
export default Vue.component('Post', {
props: {
id: number,
date: Date,
title: string,
text: string
}
});
<script setup lang="ts">
import Post from '~/components/Post.vue';
let posts = [
{
id: 1,
date: new Date(),
title: 'Title1',
text: 'Lorem ipsum dolor sit amet'
},
{
id: 2,
date: new Date(),
title: 'Title2',
text: 'Lorem ipsum dolor sit amet'
},
...
</script>
<template>
<div class="posts">
</div>
<Post
v-for="post in posts"
:key="post.id"
:title="post.title"
:date="post.date"
:text="post.text"
></Post>
</template>
I've tried various script forms in components, but nothing seems to work as expected.