[Vue.js]form 태그 내 다수의 정보 post하기

로그인 창처럼 form 태그 내에 ID, PW 정도의 많지 않은 정보만 보낸다면 Vue의 Data객체와

ID PW 내용을 v-model 디렉티브로 양방향 연결해서 json 객체를 axios나 ajax로 보내면 됩니다.

하지만 위 방식대로 form 태그 내 수많은 정보가 있는데 이를 일일이 v-model로 연결하는건 효율적이지 못합니다.

<form id="sendForm" @submit.prevent="sendPost">
	<input type="text" id="text1" name="tex1">
	<input type="text" id="text2" name="tex2">
	<input type="text" id="text3" name="tex3">
	<input type="text" id="text4" name="tex4">
	<input type="text" id="text5" name="tex5">
	<input type="text" id="text6" name="tex6">
	<input type="text" id="text7" name="tex7">
	<input type="text" id="text8" name="tex8">
	<input type="text" id="text9" name="tex9">
	<input type="text" id="text10" name="tex10">
	<button id="btnRegistItem">Regist</button>
</form>

발생원인 : form 태그 내 다수의 정보를 별도의 Data객체와 연결없이 보낼 방법은?

해결방법 :  

구글에서 검색해보면 FormData를 쓰라는 글이 많습니다.

methods: {
  sendPost() {
    var form = document.getElementById('sendForm');
    var formData = new FormData(form);

    axios.post('/someUrl', formData)
      .then((response) => {
      // success callback
    }, (response) => {
      // error callback
    });
  }
}

방식은 위와 같습니다만 저는 어떤 이유에선지 Data가 제대로 끌어와지지 않았습니다.

대신 Jquery의 serializeArray를 활용하여 해결했습니다.

methods: {
  sendPost() {
    var obj = null
    var arr = $('#sendForm').serializeArray()

    if (arr) {
      obj = {};
      jQuery.each(arr, function() {
        obj[this.name] = this.value;
      });
    }
    
    $.ajax({
      url:'/someUrl', 
      dataType:'json',
      async: false,
      contentType:'application/json',
      data:JSON.stringify({obj}),
      method:'POST', 
      success:function(t){
        // success callback
      },
      error:function(){
        // error callback
      }
    });
  }
}

( 하나의 예시일뿐 굳이 ajax로 보낼 필요 없습니다. )

한가지 주의할 점은 form 태그 내 전송할 data tag는 name이 필수적으로 들어가야 합니다.

그래야 serializeArray할때 data를 정상적으로 가져옵니다.

methods: {
  sendPost(e) {
    var data = e.target.elements['text1'].value
  }
}

특정 몇개의 data만 원한다면 위와 같은 방법으로 받아와 data를 송부할 수도 있습니다.