1. 程式人生 > >vue.js form表單提交

vue.js form表單提交

form表單提交是前端經常要用到的,vue.js的form提交只是比普通的多加幾個東西 其他都是大同小異的 上程式碼吧!

主要就是v-model的用法啦 

<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{

}
})
}
}