반응형
Vue.js - vue-axios 응답 데이터를 저장 및 표시하려고 할 때 공리가 정의되지 않음
나는 얻을 수 없을 것 같다.vue-axios브라우저에 데이터를 가져오기, 저장 및 표시합니다.제가 이걸 해봤는데undefined언제getData버튼을 클릭합니다.
new Vue({
el: '#app',
data: {
dataReceived: '',
},
methods: {
getData() {
axios.get('https://min-api.cryptocompare.com/data/price?fsym=BTC&tsyms=USD')
.then(function(response) {
this.dataReceived = this.response;
console.log(this.dataReceived);
return this.dataReceived;
})
}
}
})<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<button @click="getData" type="button">getData</button>
<p>dataReceived: {{ dataReceived }}</p>
</div>
</body>
</html>에 추가하겠습니다.@boussadjrabrahim님의 훌륭한 답변은, 팻 화살표 표기법을 사용할 필요가 있습니다.then콜백으로 콜백하여this키워드는 Vue 인스턴스에 바인드됩니다.그렇지 않으면 당신의dataReceived빈칸으로 남습니다.
new Vue({
el: '#app',
data: {
dataReceived: '',
},
methods: {
getData() {
axios.get('https://min-api.cryptocompare.com/data/price?fsym=BTC&tsyms=USD')
.then((response) => {
this.dataReceived = response.data;
console.log(this.dataReceived);
return this.dataReceived;
})
}
}
})<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue-axios@2.1.4/dist/vue-axios.min.js"></script>
</head>
<body>
<div id="app">
<button @click="getData" type="button">getData</button>
<p>dataReceived: {{ dataReceived }}</p>
</div>
</body>
</html>네가 없어졌어axios라이브러리이므로 다음과 같이 추가합니다.
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
수정해야 할 또 다른 점은this.response로 변경하다response.data
new Vue({
el: '#app',
data: {
dataReceived: '',
},
methods: {
getData() {
axios.get('https://min-api.cryptocompare.com/data/price?fsym=BTC&tsyms=USD')
.then((response)=> {
this.dataReceived = response.data;
console.log(this.dataReceived);
return this.dataReceived;
})
}
}
})<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue-axios@2.1.4/dist/vue-axios.min.js"></script>
</head>
<body>
<div id="app">
<button @click="getData" type="button">getData</button>
<p>dataReceived: {{ dataReceived }}</p>
</div>
</body>
</html>언급URL : https://stackoverflow.com/questions/52673641/vue-js-axios-is-undefined-when-trying-to-store-and-display-vue-axios-response
반응형
'programing' 카테고리의 다른 글
| java.util.stream에서 목록 가져오기Java 8에서의 스트림 (0) | 2022.06.12 |
|---|---|
| 밀리초를 "hh:mm:ss" 형식으로 변환하는 방법 (0) | 2022.06.12 |
| 변수 개수의 인수를 받아들이는 함수에 전달된 인수 수를 계산하는 방법은 무엇입니까? (0) | 2022.06.12 |
| C의 파일 크기는 어떻게 결정합니까? (0) | 2022.06.12 |
| NuxtJs 스토어에서 localStorage에 액세스하려면 어떻게 해야 합니까? (0) | 2022.06.12 |