
html
<template>
<div>
<h1>User List</h1>
<ul v-if="users.length">
<li v-for="user in users" :key="user.id">{{ user.name }}</li>
</ul>
<p v-else>Loading...</p>
</div>
</template>
<script>
export default {
data() {
return {
users: []
};
},
created() {
this.fetchUsers();
},
methods: {
async fetchUsers() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
this.users = await response.json();
} catch (error) {
console.error('Failed to fetch users:', error);
}
}
}
};
</script>
