54 lines
1.3 KiB
Vue
54 lines
1.3 KiB
Vue
<template>
|
|
<div id="app">
|
|
<h1>사용자 목록</h1>
|
|
<!-- 데이터가 로드되면 목록을 출력하고, 로드되지 않았으면 로딩 메시지를 표시 -->
|
|
<ul v-if="users.length">
|
|
<li v-for="user in users" :key="user.id">
|
|
{{ user.name }} - {{ user.phone }}
|
|
</li>
|
|
</ul>
|
|
<p v-else>Loading...</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {ref, onMounted} from 'vue';
|
|
import axios from 'axios'; // axios 불러오기
|
|
|
|
export default {
|
|
name: 'App',
|
|
setup() {
|
|
const users = ref([]); // 사용자 목록을 저장할 ref 변수
|
|
|
|
const fetchUsers = async () => {
|
|
try {
|
|
const response = await axios.get('/api/all'); // 엔드포인트를 적절히 변경
|
|
users.value = response.data; // 데이터를 users 배열에 저장
|
|
} catch (error) {
|
|
console.error('데이터를 가져오는 중 오류가 발생했습니다:', error);
|
|
}
|
|
};
|
|
|
|
// 컴포넌트가 마운트될 때 fetchUsers 함수를 호출하여 데이터 가져오기
|
|
onMounted(() => {
|
|
fetchUsers();
|
|
});
|
|
|
|
return {
|
|
users,
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
#app {
|
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-align: left;
|
|
color: #2c3e50;
|
|
margin-top: 60px;
|
|
}
|
|
</style>
|