vue.js [axios를 통해 데이터 불러오기 2]

지난번 포스팅에서는 board id값에 따른 글 불러오기를 해보았다.

 

이번에는 http://localhost:8081/#/Home에 전체글을 띄우는 것과,

일부 데이터만 가져오는 작업을 하였다.

 

 

 

Home.vue에서 for문을 사용하여 users를 찾게 만든다.

 

 

 

Home.vue <template>

<template>

  <v-card style="width: 30%">
    <h3 v-for="user in users" :key="user.id">
      {{user}}
 

    </h3>
  </v-card>


</template>

 

 

 

 

 

 

 

 

script 태그에서는 data()안에 배열 변수 선언,

methods에 retieveUsers함수 추가

Mounted에서 다시 retieveUsers를 호출

 

 

 

Home.vue <script>

<script>
export default {
  name: 'App',
  data: () => ({
    users:[]
  }),

  methods: {
    retrieveUsers(){
      this.$axios.get("board/")
          .then(response=>{
            this.users = response.data;
            console.log(response.data);
          })
          .catch(e=>{
            console.log(e);
          })
    }
  },
  mounted(){
    this.retrieveUsers();
  }
}
</script>

 

 

 

 

http://localhost:8081/#/Home에서 결과 확인

 

 

 

 

정상적으로 모든 board의 정보들이 화면에 띄워졌다!