[Vue] Axios를 이용한 통신 - Get/Post/Delete 등

Vue 통신

vue 내에서 axios를 이용해서 통신하는 방법을 구현해 보았습니다.

 

<div id="app">
  <button v-on:click="getData">get data</button>
  <ul>
      // vue에서의 foreach 같은 문법
      <li v-for="item in contacts">
          {{ item }}
          // 혹은
          {{ item.name }} {{ item.telephone }}
      </li>
  </ul>
</div>

<script>
new Vue({
	el: "#app",
    data: {
    	contacts: null
    },
    methods: {
    	// v-on:click 과 같은 이름을 씁니다.
    	getData: function(){
          axios.get("통신하고자 하는 주소")
          // response 값을 data에 선언한 contacts에 넣어줍니다.
          .then(response => this.contacts = response.contacts)
          .catch(function(error) {
          	console.log(error);
          });
        }
    }
})
</script>

위의 방법대로 axios 뒤의 get 값을 post, delete 등으로 수정하시면 활용이 가능합니다.

 

post시 데이터를 넣어줄 때에는

postContact: function() {
  axios.post("주소",{
    name: this.name,
    telephone: this.telephone
  })
  .then(response => this.addedContact = response.data)
  .catch(function(error) {
  console.log(error);
  });
}

주소 뒤에 json 형식으로 넣어주시면 됩니다.

 

이후 필요시 글을 보강하도록 하겠습니다.