VueJs Select

---

VueJs Select

---

페이지가 로딩되면 제일 먼저 DataBase 에서 Data 를 가지고 올 수 있게 해야한다.

---

1. template 를 준비

<template>
    <table class="divTableBody">
      <colgroup>
        <col width="40px">
        <col width="18%">
        <col>
        <col width="7%">
        <col width="120px">
      </colgroup>
        <th class="header_th"><input type="checkbox" class="check_box"></th>
        <th class="header_th">채널</th>
        <th class="header_th">문구</th>
        <th class="header_th">사용여부</th>
        <th class="header_th">등록일</th>
      <tr class="divTableRow body_tr" v-for="vo in boardList" v-bind:key="vo.blog">
        <td class="divTableCell"><input type="checkbox" class="check_box"></td>
        <td class="divTableCell">{{vo.channel}}</td>
        <td class="divTableCell">{{vo.phrase}}</td>
        <td class="divTableCell">{{vo.usagestatus}}</td>
        <td class="divTableCell">{{vo.registrationDate}}</td>
      </tr>
  </table>
</template>

---

2.  axios.get  을 이용해서 Data 를 받아온다.

const axios = require('axios')

export default {
  el: '.divTableBody',
  data: function () {
    return {
      boardList: []
    }
  },
  created () {
    axios.get('/dataSelect')
      .then(res => {
        console.log('==>' + res.data.message)
        this.boardList = res.data.boardList
      })
  }
}

---

3. Controller 에서 Data를 만들어서  Map에 담아 return 

@RequestMapping("/dataSelect")
@ResponseBody
public Map<String, Object> data(  @ModelAttribute BoardVO vo ) {

//  분석 제외 문구 관리 Select
List<BoardVO> boardList = boardControl.boardList();

Map<String, Object> map = new HashMap<String, Object>();

map.put("message", "dataSelect load success");
map.put("boardList", boardList );
return map;
}

---

4. return 받은 data를 boardList 배열에 할당한다.

const axios = require('axios')

export default {
  el: '.divTableBody',
  data: function () {
    return {
      boardList: []
    }
  },
  created () {
    axios.get('/dataSelect')
      .then(res => {
        console.log('==>' + res.data.message)
        this.boardList = res.data.boardList
      })
  }
}

---

5.  v-for 문을 이용해서 List 를 생성

   1 . v-bind-key 생략시 오류가 생겼는데 기본키의 의미를 가진 속성이라고 한다

<template>
    <table class="divTableBody">
      <colgroup>
        <col width="40px">
        <col width="18%">
        <col>
        <col width="7%">
        <col width="120px">
      </colgroup>
        <th class="header_th"><input type="checkbox" class="check_box"></th>
        <th class="header_th">채널</th>
        <th class="header_th">문구</th>
        <th class="header_th">사용여부</th>
        <th class="header_th">등록일</th>
      <tr class="divTableRow body_tr" v-for="vo in boardList" v-bind:key="vo.blog">
        <td class="divTableCell"><input type="checkbox" class="check_box"></td>
        <td class="divTableCell">{{vo.channel}}</td>
        <td class="divTableCell">{{vo.phrase}}</td>
        <td class="divTableCell">{{vo.usagestatus}}</td>
        <td class="divTableCell">{{vo.registrationDate}}</td>
      </tr>
  </table>
</template>