如何在vue-cli中自动提交表单？

Question

当页面加载时，我想提交一个隐藏的表单。由于表单是隐藏的，所以我不能使用提交按钮。那么，当页面以vuejs加载时，我如何自动提交表单呢？

<template>
  <div v-html="this.paymentResponse"></div>
</template>

<script>
import EventBus from '../../event-bus'

export default {
    data() {
        return {
            paymentResponse: null
        }
    },
    mounted() {
        console.log('mounted')
        this.$refs.submitBtn.click();
    },  
    beforeCreate() {
        EventBus.$on("payment", response => {
            this.paymentResponse = response
        })
    }
}
</script>

Answer 1

您可以在mounted上触发submit按钮，如下所示：

​

new Vue({
     el: '#sg1',
     mounted(){
          this.$refs.submitBtn.click();
     },
     methods:{
          formSumitted(){
               console.log("submitted");
          }
     }
})

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<div id="sg1">
    <form style="display:none" v-on:submit.prevent="formSumitted">
         <button type="submit" ref="submitBtn">Submit</button>
    </form>
</div>

​

更新：

由于表单是使用v-html传递和呈现的，所以我认为您不能使用ref。因此，您可以用id替换它，并使用vanillla函数单击按钮：

document.getElementById("submitBtn").click();

Answer 2

vue组件有一个lifeCycle，您可以使用“创建”或“挂载”方法在应用程序开始时提交表单。

new Vue({
  data: {
    formData: 'some data'
  },
  created: function () {
    // here your code for submit the form
    
  }
})