728x90
반응형
vueex4.html
<!DOCTYPE html>
<!-- /vue1/src/main/webapp/20220531/vueex4.html -->
<html>
<head>
<meta charset="UTF-8">
<title>외부 데이터 처리하기</title>
<script type="text/javascript" src="https:unpkg.com/vue@2.5.16/dist/vue.js"></script>
<style type="text/css">
#list {width:400px; border:1px solid black; border-collapse:collapse;}
#list td, #list th {border:1px solid black; text-align:center;}
#list > thead > tr {color:yellow; background-color:purple;}
</style>
</head>
<body>
<div id="simple">
<!-- v-on:keyup : 키보드 이벤트. -->
<p>
<input type="text" v-model="name" v-on:keyup="search" placeholder="두글자이상입력">
</p>
<table id="list">
<thead>
<tr>
<th>번호</th>
<th>이름</th>
<th>전화번호</th>
<th>주소</th>
</tr>
</thead>
<tbody>
<tr v-for="contact in contactlist">
<td>{{contact.no}}</td>
<td>{{contact.name}}</td>
<td>{{contact.tel}}</td>
<td>{{contact.address}}</td>
</tr>
</tbody>
</table>
<div v-show="isProcessing === true">조회중</div>
</div>
<script>
let model = {
name : "",
contactlist : [],
isProcessing : false
}
let simple = new Vue ({
el : "#simple",
data : model,
methods : {
search : function(e) {
//e : key 이벤트 객체.
//e.keyCode : 눌려진 key값의 코드값. A:65, a:97 ...
//13 : enter key의 코드값
if(e.keyCode === 13) { //key event의 enter키가 눌러졌으면
//e.target : key이벤트가 발생한 요소. <input type="text" 태그
let val = e.target.value //input 태그에 입력된 값 : ko
if(val.length >= 2)
this.fetchContacts(); //2글자 이상 입력된 경우 fetchContacts 함수 출력
else
this.contactlist=[] //2글자 이하 빈값
}
},
fetchContacts : function() { //외부 데이터 조회
this.contactlist = []
this.isProcessing = true
//this.name : ko => 입력된 값
let url = "http://sample.bmaster.kro.kr/contacts_long/search/"+this.name
let vm = this
//url : http://sample.bmaster.kro.kr/contacts_long/search/ko
//fetch(url) : 외부 데이터를 조회.
//response : url에서 전송된 응답 데이터
fetch(url).then(function(response) {
return response.json() //json 객체 형태로 리턴. 다음으로 전달.
}).then(function(json) { //json : response.json() 값. json 객체
vm.contactlist = json
vm.isProcessing = false
}).catch(function(ex) {
//catch : 오류 발생시 호출되는 영역
//ex : 예외 객체
console.log('parsing failed', ex);
vm.contactlist = [];
vm.isProcessing = false;
})
}
}
})
</script>
</body>
</html>728x90
반응형
'study > Vue' 카테고리의 다른 글
| [Vue] 28. 마우스 이벤트 (vueex1.html) (0) | 2022.06.02 |
|---|---|
| [Vue] 28. 외부데이터 처리하기2 (vueex5.html ) (0) | 2022.05.31 |
| [Vue] 28. 이벤트 처리하기2 (vueex3.html ) (0) | 2022.05.31 |
| [Vue] 28. 이벤트 처리하기 (vueex2.html ) (0) | 2022.05.31 |
| [Vue] 28. vue의 라이프사이클 (vueex1.html ) (0) | 2022.05.31 |