[Vue.js] 빠르고 쉽게 axios 로 가져온 데이터 v-for를 사용해 Table에 넣기

 

table 구조

<table class="tbl_admin">
        <thead>
          <tr>
            <th>No</th>
            <th>아이디</th>
            <th>사용자</th>
            <th>주소</th>
            <th>이메일</th>
            <th>권한</th>
            <th>가입일자</th>
            <th>강제탈퇴</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, idx) in data" :key="idx">
            <td>{{idx+1}}</td>
            <td>{{ row.id }}</td>
            <td>{{ row.name }}</td>
            <td>{{ row.address }}</td>
            <td>{{ row.email }}</td>
            <td>{{ row.role }}</td>
            <td>{{ row.created_date }}</td>
            <td><b-button @click="btnUserDel">탈퇴</b-button></td>
          </tr>
        </tbody>
      </table>

- 중요한 포인트

- (row, idx) in [불러온데이터]  

- key는 필수

- 여기서 row는 행이고 지정된 값이니 임의로 바꾸지 말 것

- idx는 데이터 외의 테이블의 인덱스값이다. <td>{{idx+1}}</td> 부분을 보면 어떤 느낌인지 알거임

 

---

script 부분

export default {
  name: 'AdminView',
  components: {
  },
  computed() {
  },
  mounted() {
    this.getUsers();
  },
  methods: {
    getUsers() {
      users().then((res) => {
        if (res.status === 200) {
          if (res.data == null || res.data === '') {
            alert('에러!');
          } else {
            this.data = res.data;
            console.log(res.data);
          }
        }
      });
    },
  },
  data() {
    return {
      data: [],
    };
  },
};
</script>

• method는 단순히 api 호출하는 구조로 짰다.
• mounted()는 DOM이 생성되는 시점에 할 걸 지정해주는거다. method에 생성한 api불러오는 함수를 this.[~~~] 으로 지정하면 됨
• data() 에서 받을 값의 데이터형식을 미리 지정(초기화)해줘야된다. 나는 배열로 들어오길래 저렇게 해줌
  •    - 예시)
  •    - string : data: ''
  •    - int : data: 0; 등등
• api호출하고나면 res.data 부분을 정의해둔 data 변수에 할당해준다. (this.data = res.data 부분)
• data 안에 들어오는 칼럼들에 대해서는 row.[column] 했을때 table이 알아서 읽어와줌^ㅁ^똑똑이

 

- 느낀점

자바는 형식 지정이 필수였는데 js에선 형식 지정도 메소드 생성도 그냥 하면되고 전부 this찍어서 쓰길래 좀 적응이 안됨