html
<form>
<ol>
<li>您比较喜欢下列哪种运动?</li>
<label><input type="radio" name="hobby1" value="篮球" v-model="hobby.hobby1" required/> 篮球
</label>
<label><input type="radio" name="hobby1" value="足球" v-model="hobby.hobby1"/> 足球 </label>
<label><input type="radio" name="hobby1" value="飞盘" v-model="hobby.hobby1"/> 飞盘 </label>
<label><input type="radio" name="hobby1" value="no" v-model="hobby.hobby1"/> 都不喜欢 </label>
<li>您是否会在每年冬天购置新衣裳?</li>
<label><input type="radio" name="hobby2" value="1" v-model="hobby.hobby2" required/> 是
</label>
<label><input type="radio" name="hobby2" value="0" v-model="hobby.hobby2"/> 否 </label>
<li>您平常有关注过数码领域吗?</li>
<label><input type="radio" name="hobby3" value="1" v-model="hobby.hobby3" required/> 有所关注
</label>
<label><input type="radio" name="hobby3" value="0" v-model="hobby.hobby3"/> 从未关注 </label>
<li>您有没有了解过计算机专业的知识吗?</li>
<label><input type="radio" name="hobby4" value="1" v-model="hobby.hobby4" required/> 有所关注
</label>
<label><input type="radio" name="hobby4" value="0" v-model="hobby.hobby4"/> 从未关注 </label>
<li>您是否会和朋友开黑玩游戏?</li>
<label><input type="radio" name="hobby5" value="1" v-model="hobby.hobby5" required/> 有所关注
</label>
<label><input type="radio" name="hobby5" value="0" v-model="hobby.hobby5"/> 从未关注 </label>
<li>您平常是自己做饭比较多吗?</li>
<label><input type="radio" name="hobby6" value="1" v-model="hobby.hobby6" required/> 有所关注
</label>
<label><input type="radio" name="hobby6" value="0" v-model="hobby.hobby6"/> 从未关注 </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)
}
},
})