vue form表单提交动态数据

项目vue-cli搭建
需求为：vue页面跳转至第三方的支付页面
操作流程为：点击确认按钮时得到得到第三方网页的url和参数信息，以form表单的post方式提交
尝试了N种方法，都不可以成功完成逻辑，最终是jQuery动态创建form表单提交的。
最终成功代码：

//生成from表单方法  放在mounted 里，在button事件里执行，注意button不要为submit，数据在别的方法里，这里就不贴了
generate() {
    //创建form
    var form = $("<form></form>");
    //设置属性
    form.attr("action", yourURL);
    form.attr("method", "post");r
    //创建input，即参数
    //我这里数据格式是json，所以是for in
    for (const key in yourData) {
        if (yourData.hasOwnProperty(key)) {
            const element = yourData[key];
            form.append($(`<input type='text' name=${key}>`).attr("value", element));
        }
    }
    form.appendTo("body");
    //不需要展示所以把ta隐藏起来
    form.hide();
    //提交表单
    form.submit();
}

失败方案 一：
form直接创建在html中（ref:from钩子函数），用status控制不要显示，点击button时，先@submit.prevetn='submitBefore’阻止默认事件请求API获取数据，动态生成input，数据获取成功后 this.$refs.from.submit()，看起来是没有什么问题，但自动提交的时候并没有带获取到的数据过去，原因可能是时间问题？有待深究…
失败方案 二：οnsubmit="return submitBefore() ，此方法为submitBefore返回true时执行提交，返回false时不执行提交，这样就可以在form默认提交前做想做的事情了，有问题吗？没有，拿到普通的html代码中跑一遍，杠杠的，然而在vue里不行…
失败方案 三：button不用submit，绑定一个ok事件，在事件里new FormData ，然后添加数据进去，用axios请求，然后，不行哦，原因你们懂得…
总之这个问题有待深究，下次再更（不知道有没有下次。。。。）