GPT

Pages Implementation

const { posts, loading, error, createPost, updatePost, deletePost } = usePosts() const newPost = ref({ title: '', content: '', authorId: '' }) const handleSubmit = async () = { await createPost({ ...newPost.value,

Prompt text

Original English text. Replace placeholders with your own details.

<script setup lang="ts">
const { posts, loading, error, createPost, updatePost, deletePost } = usePosts()
const newPost = ref({
 title: '',
 content: '',
 authorId: ''
})

const handleSubmit = async () => {
 await createPost({
 ...newPost.value,
 authorId: parseInt(newPost.value.authorId)
 })
 newPost.value = { title: '', content: '', authorId: '' }
}

const togglePublish = async (id: number, published: boolean) => {
 await updatePost(id, { published: !published })
}
</script>

<template>
 <div>
 <h1>Posts</h1>

 <div v-if="error" class="error">
 {{ error }}
 </div>

 <form @submit.prevent="handleSubmit" class="form">
 <input
 v-model="newPost.title"
 type="text"
 placeholder="Title"
 required
 />
 <input
 v-model="newPost.content"
 type="text"
 placeholder="Content"
 />
 <input
 v-model="newPost.authorId"
 type="number"
 placeholder="Author ID"
 required
 />
 <button type="submit" :disabled="loading">Add Post</button>
 </form>

 <div v-if="loading">Loading...</div>

 <ul v-else class="list">
 <li v-for="post in posts" :key="post.id" class="list-item">
 <div class="post-header">
 <h2>{{ post.title }}</h2>
 <div class="post-actions">
 <button
 @click="togglePublish(post.id, post.published)"
 :disabled="loading"
 >
 {{ post.published ? 'Unpublish' : 'Publish' }}
 </button>
 <button
 @click="deletePost(post.id)"
 :disabled="loading"
 >
 Delete
 </button>
 </div>
 </div>
 <p>{{ post.content }}</p>
 <p class="post-meta">By: {{ post.author.name }}</p>
 </li>
 </ul>
 </div>
</template>

<style scoped>
.error {
 color: red;
 margin-bottom: 1rem;
}

.form {
 margin-bottom: 2rem;
}

.form input {
 margin-right: 0.5rem;
}

.list {
 list-style: none;
 padding: 0;
}

.list-item {
 margin-bottom: 2rem;
 padding: 1rem;
 border: 1px solid #eee;
 border-radius: 4px;
}

.post-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 1rem;
}

.post-header h2 {
 margin: 0;
}

.post-actions button {
 margin-left: 0.5rem;
}

.post-meta {
 color: #666;
 font-size: 0.9rem;
 margin-top: 1rem;
}
</style>

Source & attribution

Instructa AI Prompts · Instructa AI Prompts

Source-listed license: CC-BY-4.0. Prompt text is preserved; titles and previews may be shortened for display. Source examples are not NexGateHub test results.

View original source ↗ · Source credits & licenses

Explore more prompts →