提交表格并与nuxt2重定向

Question

我正在努力与NUXT2建立一个简单的联系表格，希望用户在提交表格及其详细信息后将用户重定向到主页。

这是我现在在表格上获得的核心。经过数小时的玩法，我无法提交和重定向。

<form action="mailto:[email protected]" method="POST" @click="window.location.href = 'https://company.com/';">
<div>
  <div>
   <input type="text" name="name" id="name" autocomplete="name" placeholder="Name">
  </div>

  <div class="col-span-6 sm:col-span-3">
   <input type="email" name="email" id="email" autocomplete="email" placeholder="Email">
  </div>

  <div>
    <textarea name="message" id="message" autocomplete="message" placeholder="Your Message"></textarea>
  </div>

  <div class="xl:w-1/3 md:w-1/2 px-4">
   <a class="btn black-btn mt-2" type="submit" >Send Message</a>
  </div>
</div>
</form>

任何帮助将不胜感激。谢谢你！

- 编辑：

我的表单工作正常，现在它向提供的邮箱提交了一条消息，但是我试图在提交表格时添加吐司通知以确认已发送消息。

这是我的新表单标签：

<form action="https://formsubmit.co/email" method="POST" @submit.prevent="formSubmit">

这是

methods: {
    formSubmit() {
      this.$router.push("/");
      this.$toast.show('Message sent')
    },
  }

当前在我的脚本标签中，我在提交表单后没有获得“我不是机器人”复选框。 但是，当我添加@submit =“（）=＆gt; form ubmit（true）”在我的表单标签中，然后删除此this。$ router.push（“/”/ >从方法中，它提交表单，然后进行机器人检查，这不是应该的方式。我已经玩了一段时间了，无法弄清楚。 如果有人有建议，这将不胜感激！

Answer 1

请使用@submit而不是@click，并使用＆lt; button type =“ smind＆gt;＆gt;/butt;/button＆gt;而不是标签。

Answer 2

将您的表格更改为这样，

<form  @submit.prevent="formSubmit">
...
</form>

并在您的方法中使用名称form ubmit中添加一种方法，类似

methods: {
  formSubmit() {
    // this will just open the default mail app with the to, subject and body filled, you will need to replace those with what you want it to say.
    var link = "mailto:[email protected]?subject=email subject&body=email body";
    window.location.href = link;

    // navigate to the main page of your site
    this.$router.push("/");

    // if you want to navigate to some other url then you can replace the above line with this one
    // window.location.href = "http://www.google.com";
  }
}