내가 원하는 방식으로 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 메소드를 날린뒤 검색결과를 받아옴.