鍍金池/ 問答/HTML/ vuejs 動態(tài)提交form表單問題

vuejs 動態(tài)提交form表單問題

通過v-for動態(tài)循環(huán)某個對象,添加隱藏的元素到form中,然后通過 document.getElementById('form').submit()來提交,此時發(fā)現(xiàn)另一個頁面接收不到參數(shù)。
而通過document.createElement('input')方式創(chuàng)建的元素就可以接收到參數(shù)。

最奇怪的是,無論是v-for還是document.createElement()方式都能通過console.log(form)看到里面的內(nèi)容。僅僅是一個能接收到參數(shù)一個接收不到。
難道v-for創(chuàng)建的表單不能通過document.getElementById('form').submit()方式來提交?

v-for 方式

<form method="post" id="cgForm" style="display: none;" :action="formData != null ? formData.url : ''">
     <input type="hidden" v-for="(v, k) in formData" v-if="k != 'url'" :value="v" :name="k"/>
</form>
        
<script type="text/babel">
    this.formData = data.data;
    let form = document.getElementById('cgForm');
    console.log(form); // form中的元素都在, 可就是接收不到form中任何東西, 且提交時action也是 '/' 并不是設(shè)置好的url
    form.submit();
</script>

普通form表單

<form method="post" id="cgForm" style="display: none;"></form>

<script type="text/babel">
    this.formData = data.data;
    let form = document.getElementById('cgForm');
    
    for(let p in this.formData){
        if(p != 'url'){
            let input = document.createElement('input');
            input.setAttribute('name', p);
            input.setAttribute('value', this.formData[p]);
            form.append(input);
        }
    }
    form.action = data.data.url;
    form.submit();
</script>
回答
編輯回答
玄鳥

vuejs有生命周期,你js運行的時候,dom還沒完全生成,你可以在vue生命周期mounted中提交下表單試試,附上鏈接https://cn.vuejs.org/v2/api/#...

2017年10月28日 04:08