GPT

Vue Components Implementation

import { ref, onMounted } from 'vue' import { postService } from '@/services/posts' import type { Post, User } from '@prisma/client' const posts = ref ([]) const newPost = ref({ title: '', content: '', authorId: 0 }) co

Prompt text

Original English text. Replace placeholders with your own details.

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { postService } from '@/services/posts'
import type { Post, User } from '@prisma/client'

const posts = ref<Post[]>([])
const newPost = ref({ title: '', content: '', authorId: 0 })
const error = ref('')

onMounted(async () => {
 try {
 posts.value = await postService.getPosts()
 } catch (e) {
 error.value = 'Failed to load posts'
 }
})

async function createPost() {
 try {
 const post = await postService.createPost(newPost.value)
 posts.value.push(post)
 newPost.value = { title: '', content: '', authorId: 0 }
 } catch (e) {
 error.value = 'Failed to create post'
 }
}

async function deletePost(id: number) {
 try {
 await postService.deletePost(id)
 posts.value = posts.value.filter(post => post.id !== id)
 } catch (e) {
 error.value = `Failed to delete post ${id}`
 }
}

async function togglePublish(post: Post) {
 try {
 const updatedPost = await postService.updatePost(post.id, {
 published: !post.published
 })
 const index = posts.value.findIndex(p => p.id === post.id)
 if (index !== -1) {
 posts.value[index] = updatedPost
 }
 } catch (e) {
 error.value = `Failed to update post ${post.id}`
 }
}
</script>

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

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

 <ul>
 <li v-for="post in posts" :key="post.id">
 <h3>{{ post.title }}</h3>
 <p>{{ post.content }}</p>
 <p>By: {{ post.author.name }}</p>
 <button @click="togglePublish(post)">
 {{ post.published ? 'Unpublish' : 'Publish' }}
 </button>
 <button @click="deletePost(post.id)">Delete</button>
 </li>
 </ul>
 </div>
</template>

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

form {
 margin-bottom: 1rem;
}

input {
 margin-right: 0.5rem;
}

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

li {
 margin-bottom: 1rem;
 padding: 1rem;
 border: 1px solid #ddd;
 border-radius: 4px;
}

h3 {
 margin: 0 0 0.5rem 0;
}

p {
 margin: 0.5rem 0;
}

button {
 margin-right: 0.5rem;
}
</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 →