小程序 中使用 form 表單提交

在最近的小程序項目中，使用到了 <web-view></web-view> 內嵌 H5 頁面，在 H5 中需要使用 form 表單提交數據。

H5 使用的技術框架是 vue+vuex，剛開始編碼如下：

//form表單，v-model綁定數據
<form :action="url" ref="setForm" method="post">
     <input type="hidden" v-model="id" name="id">
     <input type="hidden" v-model="code" name="code">
     <input type="hidden" v-model="dta" name="dta">
</form>

//接口內提交表單數據
let form = this.$refs.setForm;
this.id = res.data.id;
this.code = res.data.code;
this.dta = res.data.data;
form.submit();　

聯調發現這樣寫，v-model 內的參數沒有賦值。親測以下兩種方法都可以拿到值：

解決方法1：v-model 結合延時處理

//接口內提交表單數據
let form = this.$refs.setForm;
this.id = res.data.id;
this.code = res.data.code;
this.dta = res.data.data;
setTimeout(function(){
   form.submit();
},500);

解決方法2：使用 document 創建元素

//form表單
<form :action="url" ref="setForm" method="post">
</form>

//接口內提交表單數據
let form = this.$refs.setForm;

arr = [{
   name: 'id',
   val: res.data.id
},
{
   name: 'code',
   val: res.data.code
},
{
   name: 'dta',
   val: res.data.data
}];

for(let p in arr) {
    let input = document.createElement('input');
    input.setAttribute('name': arr[p].name);
    input.setAttribute('code': arr[p].code);
    input.setAttribute('dta': arr[p].data);
    input.setAttribute('type': 'hidden');
}

form.submit();

　　

這樣寫在 H5 中訪問是沒有問題的，但是當在小程序的環境中訪問時問題來了：form-data 里根本沒有數據！

原因在於：web-view 與 form-data 不能同時使用。

解決方法：改為 get ，親測可行。（可以修改 form 的 enctype 為 application/x-www-form-urlencoded 試一下，不過這種方法還未驗證）

//form表單
<form :action="url" ref="setForm" method="get">
</form>