【Vuejs】axios를 사용해 본다
공식 문서 # 기본 예
htps // jp. 아 js. 오 rg / v2 / 코오 k 보오 k / 우신 g - 아오 s - 콘스메 아피 s. HTML # % 5 % 9F % 8 % 6 % 9 C % A C % 7 % 9 % 84 % 3 % 81 % Au % 4 % % 8B
스텁
스텁을 준비하는 것이 귀찮기 때문에 공식 문서에도 실려 있는 이하를 이용합니다.
htps : // 아피. 이기고 sk. 이 m/v1/b 피/쿤 tp세세. j 그런
이런 느낌의 JSON이 돌아옵니다.
만든 것
sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
</head>
<body>
<style>
.bpi.header {
background-color: beige;
}
.bpi.even {
background-color: azure;
}
.bpi.odd {
background-color: beige;
}
</style>
<div id="app">
<div id="rawdata">
<strong>rawdata :</strong><br>{{coindesk}}
</div>
<br>
<div id="update_time">
<strong>update_time :</strong>{{coindesk.time.updated}}
</div>
<div id="desc">
<strong>disclaimer :</strong>
{{coindesk.disclaimer}}
</div>
<div id="chartName">
<strong>chartName :</strong>{{coindesk.chartName}}
</div>
<table>
<tr class="bpi header">
<th>No.</th>
<th>code</th>
<th>symbol</th>
<th>rate</th>
<th>description</th>
<th>rate_float</th>
</tr>
<tr v-for="(e,key,index) in coindesk.bpi" v-bind:class="[index % 2 == 0 ? 'even' : 'odd']" class="bpi">
<td>{{index+1}}</td>
<td>{{e.code}}</td>
<td>{{decode(e.symbol)}}</td>
<td>{{e.rate}}</td>
<td>{{e.description}}</td>
<td>{{e.rate_float}}</td>
</tr>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
coindesk: null,
},
mounted() {
axios
.get('https://api.coindesk.com/v1/bpi/currentprice.json')
//.then(response => (console.log( response.data)))
.then(response => (this.coindesk = response.data))
},
methods: {
decode: function (str) {
return str;// TODO デコード結果を返したい
}
}
})
</script>
</body>
</html>
실행 결과
포인트
response => (this.info = response) 가 되어 있지만 API 두드렸을 때의 응답은 response => (this.info = response.data) 안에 있다. Reference
이 문제에 관하여(【Vuejs】axios를 사용해 본다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/atmospheri/items/26a56169d1d120542f5a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
