账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vuejs 动态提交form表单问题
    34
    0

    通过v-for动态循环某个对象,添加隐藏的元素到form中,然后通过 document.getElementById('form').submit()来提交,此时发现另一个页面接收不到参数。
    而通过document.createElement('input')方式创建的元素就可以接收到参数。

    最奇怪的是,无论是v-for还是document.createElement()方式都能通过console.log(form)看到里面的内容。仅仅是一个能接收到参数一个接收不到。
    难道v-for创建的表单不能通过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也是 '/' 并不是设置好的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>
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部