vue 使用form提交表单

<template>
  <div class="form-sub">
    <form :action="formUrl" method="post" id="form" class="form">
      <input type="hidden" v-for="(em,key,index) in formData" :name="key" :value="em" :key="index"/>
    </form>
  </div>
</template>

<script>
import {post} from '@/assets/js/lib/request';
import {formatUrl} from '@/assets/js/common/utils';
import urlencode from 'urlencode';

export default {
  name: 'formSub',
  props: {
    flag: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      formData: '',
      formUrl: ''
    };
  },
  watch: {
    flag: {
      handler (val) {
        console.log(val);
        this.formSub();
      },
      deep: true, // true 深度监听
      immediate: true // 深度监听首次执行
    }
  },
  methods: {
    formSub () {
      post({
        pid: 2012,
        loadingIsShow: true,
        loadingIsHide: true,
        params: {
          bookingId: this.$store.state.app.bookingId || this.$store.state.app.bookingMessage.bookingId,
          bankId: 'XMUNIFIEDOVERSEAS' // 'EASYPAY'
        }
      }).then(res => {
        console.log(res);
        let {url} = res,
          params = formatUrl(url);
        Object.keys(params).map(em => {
          params[em] = urlencode.decode(params[em]);
        });
        this.formData = params;
        // 支付post提交数据
        // this.formData = formatUrl(urlencode.decode(url));
        this.formUrl = url.split('?')[0];
        setTimeout(() => {
          console.log('sub');
          document.getElementById('form').submit();
        }, 200);
      });
    }
  }
};
</script>

<style lang="less" scoped>
  .form-sub {
    display: none;
  }
</style>