Vue v-for 사용
1. 데이터 요청
this.$http.post('/web/stat/mapSearch.json', {'text': this.text, 'x': center.x, 'y':center.y})
.then(function(response){
debugger;
list = response.data.list;
page = response.data.page;
}, function(response){
//debugger;
});
파라미터가 전달되지 않을 시에, 아래 내용을 추가한다.
http: {
emulateJSON: true,
emulateHTTP: true
},
결과 데이터 확인
페이지 정보를 가지고 최소, 최대 페이지를 구한다.
내부적으로 계산하는 코드 추가
data: {
type : '',
text : '',
items: [],
page : {},
displayCount : 5,
pageStart : 1,
pageEnd : 10,
},
data 를 정의 해 놓고, this로 사용한다.
this.items = response.data.list;
this.page = response.data.page;
this.pageStart = this.page.pageNo - parseInt((this.displayCount - 1) / 2, 10)
if (this.pageStart < 1) this.pageStart = 1;
this.pageEnd = this.pageStart + this.displayCount - 1;
if (this.pageEnd > this.page.pageCount) this.pageEnd = this.page.pageCount;
2. range 사용
range 메소드 생성
range: function (start, end){
list = []
for (i = start; i <= end ; i ++) list.push(i);
return list;
}
<div class="btn-group btn-group-xs" role="group" aria-label="page number" v-for="n in range(5, 20)">
<button type="button" class="btn">{{ n }}</button>
</div>
표출되는 것을 확인한 이후, click 함수 이벤트를 추가한다.
<button type="button" class="btn" v-on:click="search(n)">{{ n }}</button>
search 함수 변경
search: function(page){
center = wmap.getCenter();
this.$http.post('/web/stat/mapSearch.json', {'text': this.text, 'x': center.x, 'y':center.y, 'row_count': this.rowCount, 'page': page})
.then(function(response){
debugger;
this.items = response.data.list;
this.page = response.data.page;
this.pageStart = this.page.pageNo - parseInt((this.displayCount - 1) / 2, 10)
if (this.pageStart < 1) this.pageStart = 1;
this.pageEnd = this.pageStart + this.displayCount - 1;
if (this.pageEnd > this.page.pageCount) this.pageEnd = this.page.pageCount;
}, function(response){
//debugger;
});
},