Vue 검색시..query 날리는 방법?
내가 원하는 방식으로 query를 날리고싶은데 Vue는 다룬지 일주일정도밖에안되서.. 해결방법이 생각이 나지않았다.
그러다가 아래와 같은 해결방안이 떠올랐다.
WEB -> query -> | server(GET /api/:query )
<input type="text" v-model="question">
<script>
import axios from 'axios'
import _ from 'loadash'
export default {
data() {
question: '',
answer: '',
result: '',
url: '요청할URL'
}
},
watch: {
question: function(newQuestion){
this.answer = "대기중입니다.."
this.getResult()
}
},
methods: {
getResult: _.debounce(
function() {
var vm = this
if(this.question){
vm.answer = '검색중...'
var searchUrl = vm.url + vm.question
axios.get(searchUrl)
.then(function(res){
vm.result = res.data
vm.answer = '검색결과' + vm.question + '(' + res.data.length + ')'
})
} else {
vm.answer = ''
}
}, 500
)
}
</script>
// v-model 로 검색하고싶은 query를 입력받은뒤,
axios 를 이용해 GET 메소드를 날린뒤 검색결과를 받아옴.
'Programming > Vue.js' 카테고리의 다른 글
Vue.js 플러그인 사이트 (0) | 2020.01.13 |
---|---|
Quasar SSR) meta 설정하기 (0) | 2020.01.13 |
Quasar 프레임워크 SSR (0) | 2020.01.13 |
(Vue.js 오류 해결) 같은 경로일때 로드가 되지 않는 문제. (0) | 2018.03.16 |
Vue 관련 스크립트 모음 (0) | 2018.02.28 |
댓글
이 글 공유하기
다른 글
-
Quasar SSR) meta 설정하기
Quasar SSR) meta 설정하기
2020.01.13 -
Quasar 프레임워크 SSR
Quasar 프레임워크 SSR
2020.01.13 -
(Vue.js 오류 해결) 같은 경로일때 로드가 되지 않는 문제.
(Vue.js 오류 해결) 같은 경로일때 로드가 되지 않는 문제.
2018.03.16 -
Vue 관련 스크립트 모음
Vue 관련 스크립트 모음
2018.02.28