form表單提交是前端常常要用到的,vue.js的form提交只是比普通的多加幾個東西 其餘都是大同小異的 上代碼吧!前端
主要就是v-model的用法啦 vue
<form action="" method="post" enctype="multipart/form-data"> <div class="add-to"> <div class="address"> <p class="address-p">地址</p> <select class="address-contry address-s" v-model="formObj.contry"> <option :value="item.val" v-for="(item,index) in contry" :key="index">{{item.text}}</option> </select> <select class="address-province address-s" v-model="formObj.province"> <option :value="item.val" v-for="(item,index) in province" :key="index">{{item.text}}</option> </select> <select class="address-city address-s" v-model="formObj.city"> <option :value="item.val" v-for="(item,index) in city" :key="index">{{item.text}}</option> </select> <select class="address-area address-s" v-model="formObj.area"> <option :value="item.val" v-for="(item,index) in area" :key="index">{{item.text}}</option> </select> <input type="text" placeholder="請輸入詳細地址" class="address-text address-s" v-model="formObj.detail"/> </div> <div class="address-phone"> <p class="address-num">聯繫方式</p> <input type="text" placeholder="請輸入電話號碼" class="address-text address-s" v-model="formObj.phone"/> </div> <div class="address-div"> <p class="address-detailed">詳細地址:{{formObj.contry + formObj.province + formObj.city + formObj.area + formObj.detail + ' ' + formObj.phone}}</p> </div> <div class="number"> <p class="address-num">數量</p> <input type="number" class="number-input" name="points" min="0" max="100" value="1" v-model="formObj.number"/> </div> <div class="shopping-cart"> <button class="add-shopping-buy" @click="onSubmit($event)">購買</button> </div> </div> </form>
export default { data(){ return{ formObj:{ contry:'', province:'', city:'', area:'', detail:'', phone:'', number:'' } } } }, methods:{ onSubmit(event) { event.preventDefault(); let formData = JSON.stringify(this.formObj); console.log(formData); this.$http.post('', formData).then(function (res) { if (res.status === 2000) { } else{ } }) } }