NASA 이미지 API를 호출하고 화면에 표시하는 작은 VueJs 앱을 만들고 있습니다.
헤더 구성 요소 (아래)에 검색 표시 줄이 있습니다. 클릭하면 다른 파일에 정의 된 Axios 메서드가 호출됩니다. 문서에서 함수를 구성 요소로 가져 오면 '방법'에서 정의해야한다는 것을 문서에서 이해했습니다. 그러나 검색을 클릭하면 콘솔에 아무것도 표시되지 않습니까?
참고 : NASA에 대한 호출은 테스트를 거쳤으며 구성 요소에 포함 할 때 작동합니다. 나는 그것을 다른 곳에서 사용하지 않을 것이므로 구성 요소에 남겨 두어야하는지 질문을합니다.
그러나 여전히 문제의 논리를 이해하고 싶습니다.
구성 요소 코드 :
<template>
<div>
<h1>Nasa Image Search</h1>
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search.." name="search" />
<button v-on:click="search" type="submit">Search</button>
</form>
</div>
</div>
</template>
<script>
import nasa from '../apiCall'
export default {
name: 'Header',
methods: {
search : function(){
nasa
}
}
}
</script>
Axios 함수 호출 :
import axios from 'axios'
const nasa = () => {
var url = `https://images-api.nasa.gov/search?q=apollo-13&media_type=image`
console.log(url) //bug testing
axios
.get(url)
.then(function(response) {
// handle success
console.log(response)
})
.catch(function(error) {
// handle error
console.error(error)
})
}
export default { nasa }
기본 내보내기는 실제로 다음과 같은 함수 속성이있는 개체입니다.
{
nasa: () => { ... }
}
개체를 가져올 때 이름을 지정 nasa
하므로 실제로 다음과 같은 함수를 호출해야합니다.
nasa.nasa()
함수를 내보내려고 할 수 있으므로 가져 오기를 그대로두고 내보내기를 다음과 같이 변경하십시오.
export default nasa; // no brackets
구성 요소에서이를 메서드에 포함 할 필요가 없습니다. 메서드에 직접 설정할 수 있습니다 search
.
methods: {
search: nasa
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다