GPT

Basic Database Operations Component

import { ref, onMounted } from 'vue'; import { sql } from '@/lib/db'; interface User { id: number; name: string; email: string; } const users = ref ([]); const loading = ref(false); const error = ref (null); const

Prompt text

Original English text. Replace placeholders with your own details.

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { sql } from '@/lib/db';

interface User {
 id: number;
 name: string;
 email: string;
}

const users = ref<User[]>([]);
const loading = ref(false);
const error = ref<string | null>(null);

const fetchUsers = async () => {
 loading.value = true;
 error.value = null;
 try {
 users.value = await sql<User[]>`
 SELECT id, name, email
 FROM users
 ORDER BY name ASC
 `;
 } catch (e: any) {
 error.value = e.message;
 } finally {
 loading.value = false;
 }
};

const addUser = async (name: string, email: string) => {
 loading.value = true;
 error.value = null;
 try {
 const [newUser] = await sql<User[]>`
 INSERT INTO users (name, email)
 VALUES (${name}, ${email})
 RETURNING id, name, email
 `;
 users.value.push(newUser);
 } catch (e: any) {
 error.value = e.message;
 } finally {
 loading.value = false;
 }
};

const updateUser = async (id: number, name: string, email: string) => {
 loading.value = true;
 error.value = null;
 try {
 const [updatedUser] = await sql<User[]>`
 UPDATE users
 SET name = ${name}, email = ${email}
 WHERE id = ${id}
 RETURNING id, name, email
 `;
 const index = users.value.findIndex(u => u.id === id);
 if (index !== -1) {
 users.value[index] = updatedUser;
 }
 } catch (e: any) {
 error.value = e.message;
 } finally {
 loading.value = false;
 }
};

const deleteUser = async (id: number) => {
 loading.value = true;
 error.value = null;
 try {
 await sql`
 DELETE FROM users
 WHERE id = ${id}
 `;
 users.value = users.value.filter(u => u.id !== id);
 } catch (e: any) {
 error.value = e.message;
 } finally {
 loading.value = false;
 }
};

onMounted(fetchUsers);
</script>

<template>
 <div>
 <h2>Users</h2>
 
 <div v-if="loading">Loading...</div>
 <div v-else-if="error" class="error">{{ error }}</div>
 
 <ul v-else>
 <li v-for="user in users" :key="user.id">
 {{ user.name }} ({{ user.email }})
 <button @click="deleteUser(user.id)">Delete</button>
 </li>
 </ul>
 </div>
</template>

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 →