形式的动作不VUE的自举形式内响应

如何解决形式的动作不VUE的自举形式内响应

我目前使用的业务通过formsubmit.co使形式通过电子邮件接收该输入数据，而不必建立了后端来存储和发送数据，而不是formsubmit手柄的存储和发送，在其网站上他们声称所有你需要做的是与您的电子邮件，设置方法为POST和对所有输入名称，选择等...

沿设置action属性指向其网站

我与他们现场演示测试服务，它似乎工作就好了，这样使我相信在某个地方我窗体本身的问题所在。

应该发生什么，当用户点击提交时，输入的数据应该通过电子邮件发送给我，但至今这还没有发生。

我目前正在使用与 Bootstrap 集成的 Vue.js。这是表格。

表格：


Vue.component('bootstrap-form',{
    template: `
        <div>
    <b-form action="https://formsubmit.co/test0389@gmail.com" method="POST" role="form" @submit="onSubmit" v-if="show" class="bootstrap-form">


      <b-form-group id="input-group-1" label="Your Name:" label-for="input-1">
        <b-form-input
          name="name"
          id="input-1"
          v-model="form.name"
          placeholder="Enter name"
          required
        ></b-form-input>
      </b-form-group>

      <b-form-group
        id="input-group-2"
        label="Email address:"
        label-for="input-2"
        description="We'll never share your email with anyone else."
      >
        <b-form-input
          id="input-2"
          name="email"
          v-model="form.email"
          type="email"
          placeholder="Enter email"
          required
        ></b-form-input>
      </b-form-group>

       <b-form-group
        id="input-group-3"
        label="Phone Number:"
        label-for="input-3"
        description="We'll never share your number with anyone else."
      >
        <b-form-input
          id="input-3"
          name="telephone"
          v-model="form.telephone"
          type="tel"
          placeholder="XXX-XXX-XXXX"
          pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
          required
        ></b-form-input>
      </b-form-group>

       <b-form-group id="input-group-4" label="Regarding:" label-for="input-4">
        <b-form-select
          name="option"
          id="input-4"
          v-model="form.option"
          :options="options"
          required
        ></b-form-select>
      </b-form-group>

      <b-form-group v-if="this.form.option == 'Shower Doors'" id="input-group-5" label="Shower Doors:" label-for="input-5">
        <b-form-select
          id="input-5"
          name="shower doors"
          v-model="form.showerDoor"
          :options="showerDoors"
          required
        ></b-form-select>
      </b-form-group>

        <b-form-group v-if="this.form.option == 'Other'" id="input-group-6" label="Inquiry:" label-for="input-6">
        <b-form-textarea
          id="input-6"
          name="inquiry"
          v-model="form.other"
          required
        ></b-form-textarea>
      </b-form-group>

      <b-form-group v-if="this.form.submitted == true" id="input-group-7"
        description="Thank you,We'll be in Contact soon!"
      ></b-form-group>
      

      <b-button type="submit" variant="primary">Submit</b-button>
    </b-form>
  </div>
    `,data() {
      return {
        form: {
          email: '',name: '',telephone: '',option: null,showerDoor: null,submitted: false
        },options: [{ text: 'Select One',value: null },'Shower Doors','Mirrors','Glass Shelves','Other'],showerDoors: [{ text: 'Select One','Sliding Shower & Tub Doors','Swinging Shower Doors','Splash Guard/Spray Screen','Custom'],show: true
      }
    },methods: {
      onSubmit(event) {
        event.preventDefault()
        console.log(JSON.stringify(this.form));
        this.form.submitted = true
        this.form.email = ''
        this.form.name = ''
        this.form.telephone = ''
        this.form.option = null,this.form.showerDoor = null,// Trick to reset/clear native browser form validation state
        this.show = false
        this.$nextTick(() => {
          this.show = true
        })
      }
    }
})

解决方法

在与 formSubmit 交谈后，他们让我尝试包含 AJAX 的表单提交。

进入后

$.ajax({
    url: "https://formsubmit.co/ajax/your@email.com",method: "POST",data: {
        name: "FormSubmit",message: "I'm from Devro LABS"
    },dataType: "json"
});

在我的 onSubmit 函数中，提交开始工作。