vue中项目如何提交form格式数据的表单

下面是关于Vue中提交form格式数据的表单的完整攻略。

准备工作

在Vue中使用表单提交，需要先安装axios和qs这两个插件。

npm install axios qs --save

安装完成后，在需要使用的组件中引入这两个插件。

import axios from 'axios'
import qs from 'qs'

Vue.prototype.$axios = axios
Vue.prototype.$qs = qs

提交表单数据

在Vue中，我们可以通过form表单的方式来提交数据。但是，为了保证数据的安全性和完整性，在提交前我们需要对表单数据进行序列化。

以下是两个示例说明。

1.使用vue-form表单组件

具体使用方法可以参考vue-form组件文档。

<template>
  <form v-form v-on:submit.prevent="handleSubmit">
     <v-form-input name="name" v-model="form.name" label="名称"></v-form-input>
     <v-form-textarea name="description" v-model="form.description" label="描述"></v-form-textarea>
     <button type="submit">提交</button>
  </form>
</template>

<script>
  import { Form, FormInput, FormTextarea } from 'vue-form'
  export default {
    components: { Form, FormInput, FormTextarea },
    data() {
       return {
         form: {
           name: '',
           description: ''
         }
       }
     },
    methods: {
      handleSubmit() {
         const data = this.$qs.stringify(this.form)
         this.$axios.post('/api/submit', data).then(res => {
           console.log(res)
         }).catch(err => {
           console.log(err)
         })
       }
     } 
  }
</script>

2.手动处理表单提交

在vue中可以通过事件监听的方式来处理表单提交事件。

<template>
  <form>
    <div>
      <label>名称</label>
      <input type="text" v-model="form.name">
    </div>
    <div>
      <label>描述</label>
      <textarea v-model="form.description"></textarea>
    </div>
    <button type="submit" v-on:click.prevent="handleSubmit">提交</button>
   </form>
</template>

<script>
  export default {
     data() {
        return {
           form: {
             name: '',
             description: ''
           }
         }
       },
     methods: {
        handleSubmit() {
           const data = this.$qs.stringify(this.form)
           this.$axios.post('/api/submit', data).then(res => {
             console.log(res)
           }).catch(err => {
             console.log(err)
           })
        }
      } 
  }
</script>