vue submit 버튼 데이터

vue submit 버튼 데이터

내가 이 코드를 가지고 있다고 가정해봐

<main>
    <form>
        <input type="text" v-model="name"> 
        <button type="submit" @click="submit">
            Submit From Vue Property
        </button>
    </form>
</main>

그리고 이건 Vue 코드야

new Vue({
   el : 'main',
   data : {
       name : ''
   },
   methods : {
      submit(){

      }
   }
}) 

대신 Vue 데이터 속성에서 서버로 제출하려면 어떻게 해야 합니까?제출방법에 사용한 것입니다.

(솔직히 실제 코드는 매우 복잡하지만 문제는 동일합니다.대신 Vue 데이터 속성을 제출하려면 어떻게 해야 합니까?)

Ajax 기반 솔루션을 찾고 있다면 'axios'라는 라이브러리를 사용하는 것을 고려해 보십시오.jquery's get and post 메서드처럼 URL을 사용하여 데이터를 게시/취득할 수 있습니다.

axi를 사용하려면 먼저 npm을 사용하여 axi를 설치해야 합니다.npm install axios --save, 를 사용하여 Import 합니다.import axios from axios이것을 송신시에 사용합니다.새로운 코드는 다음과 같습니다.

<main>
    <form @submit.prevent="submit">
        <input type="text" v-model="name"> 
         <button type="submit">
            Submit From Vue Property
        </button>
    </form>
</main>


new Vue({
   el : 'main',
   data : {
       name : ''
   },
   methods : {
      submit(){
          axios.post('/your-url', {name: this.name})
          .then(res => {
              // do something with res
          })
          .catch(err => {// catch error});
      }
   }
})

여기서 vue 변수를 사용하여 전체 폼 데이터를 제출할 수 있습니다.api를 만들 수 있습니다.

<template>
  <div>
    <form @submit.prevent="submitform">
       <input type="text" v-model="formdata.firstname"> 
       <input type="text" v-model="formdata.lastname"> 
       <input type="text" v-model="formdata.email"> 
       <input type="text" v-model="formdata.password"> 
       <button type="submit">
         Submitform
       </button>
    </form>
  </div>
</template>

<script>

import axios from 'axios'

export default {
  name: 'el',
  data () {
    return {
       formdata:{ firstname: '', lastname: '', email: '', password: '' }
       // this is formdata object to store form values
    }
  },
  methods: {
    submitform(){
      axios.post('/url', { this.formdata })
      .then(res => {
         // response
      })
      .catch(err => { 
         // error 
      })
  },
  mounted () {

  },
  components: {

  }
}
</script>

악리 없이 할 수 있는 방법이 있을까요?서버 콜을 하는 것은 아닙니다.프로젝트 내의 다른 js파일에 있는 데이터만 있으면 됩니다.

언급URL : https://stackoverflow.com/questions/45398114/vue-submit-button-data