Postman 없이 api 호출해 db table 만들기 (4) table에 db값 넣기 v-for

지난 게시글에서,

backend와 frontend를 연동해

db값을 불러와

만들어둔 table에 각각의 값을 넣어주었다.

 

 

그런데, 

이렇게 mustache에 각각 넣어주는 건 데이터가 적은 지금에야 가능하니까

v-for 를 이용해서 한번에 진행해보자

 

 

 

 

 

우선 template mustache에 넣어야 하는 값이 바뀌어야 하니까

methods에서 수정해주자

<script>
import axios from "axios";
export default {
  name: "myTable",

  data() {
    return {
      UserID: [],
      Country: [],
    };
  },

  mounted() {
    this.getData();
  },

  methods: {
    async getData() {
      try {
        const { data } = await axios.get(
          "http://localhost:4003/api/v1/infos/get"
        );
        //console.log(data)
        for (var i = 0; i < data.length; i++) {
          this.UserID.push(data[i].UserID);
          this.Country.push(data[i].Country);
        }
      } catch (error) {
        console.err(error);
      }
    },
  },

};

 

 

 

 

 

UserID, Country라는 리스트를 새로 만들어

각각의 db값들을 push시켜주었다

그럼 이제 template에 넣어주자

 

 

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th colspan="2">DB info 보기</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>UserID</td>
          <td>Country</td>
        </tr>

        <tr v-for="i in this.UserID.length" v-bind:key="i">
          <td>{{ UserID[i-1] }}</td>
          <td>{{ Country[i-1] }}</td>
        </tr>

      </tbody>
    </table>
  </div>
</template>

 

 

 

 

<tr v-for="i in this.UserID.length" v-bind:key="i"> 는

1부터 this.UserID.length=2까지를 의미

우리는 인덱스로 불러올거니까 0부터 1을 이용해야 하므로 i-1을 해주자

 

 

 

그러면,

성공

 

 

 

myTable.vue 전체코드

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th colspan="2">DB info 보기</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>UserID</td>
          <td>Country</td>
        </tr>

        <tr v-for="i in this.UserID.length" v-bind:key="i">
          <td>{{ UserID[i - 1] }}</td>
          <td>{{ Country[i - 1] }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>




<script>
import axios from "axios";
export default {
  name: "myTable",

  data() {
    return {
      UserID: [],
      Country: [],
    };
  },

  mounted() {
    this.getData();
  },

  methods: {
    async getData() {
      try {
        const { data } = await axios.get(
          "http://localhost:4003/api/v1/infos/get"
        );
        //console.log(data)
        for (var i = 0; i < data.length; i++) {
          this.UserID.push(data[i].UserID);
          this.Country.push(data[i].Country);
        }
      } catch (error) {
        console.err(error);
      }
    },
  },
};
// async function getData() {
//   try {
//     // const responseCountry = await axios.get("################")
//     // console.log(responseCountry)
//     const infosController = require("../backend/src/api/v1/infos//infos.controller")
//     axios.get("/get",(infosController.getSignupInfos)).then((res) => {
//       // 불러온 값을 Console.
//       console.log(res.data);
//     });
//   } catch (error) {
//     console.err(error);
//   }
// }
</script>

<style>
table,
td {
  border: 1px solid #333;
}
thead,
tfoot {
  background-color: #333;
  color: #fff;
}
</style>

 

 

 

 

그러면,

이제 Vuex를 써서 해보자