vue-

by Kim Ara

HTML

<div id="watch-test">
  <p>
    YES or NO
    <input v-model='question'>
  </p>
  <p>{{answer}}</p>
</div>
<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
<script src="https://unpkg.com/[email protected]/lodash.min.js"></script>

Vue

var watchTest = new Vue({
	el:'#watch-test',
  data:{
  	question:'',
    answer:'질문 하기 전엔 대답안해'
  },
  watch:{
  	//질문이 변경될 때 마다 실행
    question: function(newQuestion){
    	this.answer='기다리는 중...'
      this.getAnswer()
    }
  },
  methods:{
  	getAnswer: _.debounce(
    	function	(){
      	if(this.question.indexOf('?')===-1){
        	this.answer='질문에 물음표 포함'
          return
        }
        this.answer='생각중...'
        var vm = this
        axios.get('https://yesno.wtf/api')
        	.then(function(response){
          	vm.answer= _.capitalize(response.data.asnwer)
          })
          .catch(function(error){
          	vm.answer='에러'+error
          })
      },
      //사용자가 입력을 기다리는 시간
      500
    )
  }
  
  
})