Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<template> <div> <p v-if="isLoading">Loading users…</p> <p v-else-if="error" class="error">Error: {{ error }}</p> <ul v-else> <li v-for="user in users" :key="user.id"> {{ user.name }} — {{ user.email }} </li> </ul> <button @click="refresh" :disabled="isLoading">Refresh</button> </div> </template> <script setup> import { ref, onMounted } from 'vue'; const users = ref([]); const isLoading = ref(false); const error = ref(null); async function fetchUsers() { isLoading.value = true; error.value = null; try { const res = await fetch('https://jsonplaceholder.typicode.com/users'); if (!res.ok) throw new Error(`HTTP ${res.status} — ${res.statusText}`); users.value = await res.json(); } catch (e) { error.value = e.message; } finally { isLoading.value = false; } } const refresh = fetchUsers; onMounted(fetchUsers); </script>
Result
Open