vue提交表单问题

Question

比如这里有个表单demo：

<div id="app">
    <form @submit.prevent="submit">
        姓名
        <div class="field">
            <input name="name" type="text">
        </div>
        性別
        <div class="field">
            男<input name="gender" type="radio" value="male">
            女<input name="gender" type="radio" value="female">
        </div>
        <input type="submit" value="提交">
    </form>
</div>

用vue提交表单：

new Vue({

    el: '#app',
    methods: {
        submit: function(event) {
            
            var formData = new FormData(event.target);
            
            this.$http.post('/path/to', formData).then((response) => {
                // success callback
            }, (response) => {
                // error callback
            });

        }
    }

})

问题：
点击提交的时候，显示如下错误：Uncaught TypeError: Cannot read property 'target' of undefined，怎么个意思？

Answer 1

你的 formData 是错误的，试试下面这样获取表单数据吧。

<div id="app">
    <form @submit.prevent="submit">
        <div class="field">
            姓名：<input type="text" v-model="user.name">
        </div>
        
        <div class="field">
            性別：
            <label>
                <input type="radio" value="男" v-model="user.gender"> 男
            </label>
            <label>
                <input type="radio" value="女" v-model="user.gender"> 女
            </label>
        </div>
        
        <input type="submit" value="提交">
    </form>
</div>

new Vue({

    el: '#app',
    data: {
        user: {
            name: '',
            gender: ''
        }
    },
    methods: {
        submit: function() {
          var formData = JSON.stringify(this.user); // 这里才是你的表单数据
          
          this.$http.post('/path/to', formData).then((response) => {
              // success callback
          }, (response) => {
              // error callback
          });
        }
    }

})

Answer 2

试试？

@submit="submit($event)"

Answer 3

<div id="app">
    <form @submit.prevent="submit">
        <div class="field">
            姓名：<input type="text" v-model="user.name">
        </div>
        
        <div class="field">
            性別：
            <label>
                <input type="radio" value="男" v-model="user.gender"> 男
            </label>
            <label>
                <input type="radio" value="女" v-model="user.gender"> 女
            </label>
        </div>
        
        <input type="submit" value="提交">
    </form>
</div>

new Vue({

    el: '#app',
    data: {
        user: {
            name: '',
            gender: ''
        }
    },
    methods: {
        submit: function() {
          var formData = JSON.stringify(this.user); // 这里才是你的表单数据
          console.log(formData);
        }
    }

})

Answer 4

你好..如果是input的类型是file要怎么获取啊?