vue 提交form表单_vue中from表单提交-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45904712/article/details/127550489

博客提及了HTML和Vue相关内容，HTML是前端基础标记语言，Vue是流行的前端框架，二者在前端开发中都有重要作用，可用于构建网页和Web应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html

 <form>
        <ol>
            <li>您比较喜欢下列哪种运动？</li>
            <label><input type="radio" name="hobby1" value="篮球" v-model="hobby.hobby1" required/>&nbsp;&nbsp;篮球&nbsp;&nbsp;
            </label>
            <label><input type="radio" name="hobby1" value="足球" v-model="hobby.hobby1"/>&nbsp;&nbsp;足球&nbsp;&nbsp; </label>
            <label><input type="radio" name="hobby1" value="飞盘" v-model="hobby.hobby1"/>&nbsp;&nbsp;飞盘&nbsp;&nbsp; </label>
            <label><input type="radio" name="hobby1" value="no" v-model="hobby.hobby1"/>&nbsp;&nbsp;都不喜欢&nbsp;&nbsp; </label>
            <li>您是否会在每年冬天购置新衣裳？</li>
            <label><input type="radio" name="hobby2" value="1" v-model="hobby.hobby2" required/>&nbsp;&nbsp;是&nbsp;&nbsp;
            </label>
            <label><input type="radio" name="hobby2" value="0" v-model="hobby.hobby2"/>&nbsp;&nbsp;否&nbsp;&nbsp; </label>
            <li>您平常有关注过数码领域吗？</li>
            <label><input type="radio" name="hobby3" value="1" v-model="hobby.hobby3" required/>&nbsp;&nbsp;有所关注&nbsp;&nbsp;
            </label>
            <label><input type="radio" name="hobby3" value="0" v-model="hobby.hobby3"/>&nbsp;&nbsp;从未关注&nbsp;&nbsp; </label>

            <li>您有没有了解过计算机专业的知识吗？</li>
            <label><input type="radio" name="hobby4" value="1" v-model="hobby.hobby4" required/>&nbsp;&nbsp;有所关注&nbsp;&nbsp;
            </label>
            <label><input type="radio" name="hobby4" value="0" v-model="hobby.hobby4"/>&nbsp;&nbsp;从未关注&nbsp;&nbsp; </label>
            <li>您是否会和朋友开黑玩游戏？</li>
            <label><input type="radio" name="hobby5" value="1" v-model="hobby.hobby5" required/>&nbsp;&nbsp;有所关注&nbsp;&nbsp;
            </label>
            <label><input type="radio" name="hobby5" value="0" v-model="hobby.hobby5"/>&nbsp;&nbsp;从未关注&nbsp;&nbsp; </label>
            <li>您平常是自己做饭比较多吗？</li>
            <label><input type="radio" name="hobby6" value="1" v-model="hobby.hobby6" required/>&nbsp;&nbsp;有所关注&nbsp;&nbsp;
            </label>
            <label><input type="radio" name="hobby6" value="0" v-model="hobby.hobby6"/>&nbsp;&nbsp;从未关注&nbsp;&nbsp; </label>
        </ol>

        <button @click="submit">提交问卷</button>

    </form>

vue

const vm = new Vue({
        el: '#questionnaire',
        data() {
            return {
                hobby: {
                    hobby1: '',
                    hobby2: '',
                    hobby3: '',
                    hobby4: '',
                    hobby5: '',
                    hobby6: '',
                },
            }
        },
        methods: {
            submit() {
                let formData = new FormData();
                for(var key in this.hobby){
                    formData.append(key,this.hobby[key]);
                }//将数组的值给formdata
                for (var value of formData.values()) {
                    console.log(value);
                }//遍历formdata
                debugger
                console.log(formData);

                //在这里进行上传（axios、ajax）
            }
        },
    })