不知道如何在vuejs中使用emailjs

Question

我是vueJs的初学者，我尝试使用emailjs使用Js制作表单

要使用emailjs，我已经完成了以下步骤（使用来自emailjs网站的jsfiddle链接）

在form.vue中，我将其粘贴到模板中：

<form id="myform">
<label>reply_to</label>
<input type="text" name="reply_to" />
<label>from_name</label>
<input type="text" name="from_name" />
<label>to_name</label>
<input type="text" name="to_name" />
<label>message_html</label>
<input type="text" name="message_html" />
<br><br>
<button>
Send
</button>
</form>

我在index.html中粘贴

 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript" src="https://cdn.emailjs.com/dist/email.min.js"></script>
<script type="text/javascript">
   (function(){
      emailjs.init("my user account");
   })();
</script>

但是我不知道如何在form.vue js小提琴中重新编写此脚本部分：

var myform = $("form#myform");
myform.submit(function(event){
    event.preventDefault();

    var params = myform.serializeArray().reduce(function(obj, item) {
     obj[item.name] = item.value;
     return obj;
  }, {});

  // Change to your service ID, or keep using the default service
  var service_id = "default_service";

  var template_id = "template_e5nc4Q8i";
  myform.find("button").text("Sending...");
  emailjs.send(service_id,template_id,params)
    .then(function(){ 
       alert("Sent!");
       myform.find("button").text("Send");
     }, function(err) {
       alert("Send email failed!\r\n Response:\n " + JSON.stringify(err));
       myform.find("button").text("Send");
    });
  return false;

Answer 1

这是将emailjs与Vue结合使用以通过电子邮件提交联系表单的示例

<script type="text/javascript">
  Vue.use(Vuelidation);
  new Vue({
    el: '#contact-form',
    data () {
      return {
        email: '',
        name: '',
        subject: '',
        text: '',
      }
    },
    vuelidation: {
      data: {
        email: {
      required: true,
      email: true,
        },
        name: {
      required: true,
        },
        subject: {
      required: true,
        },
        text: {
      required: true,
        },
      }
    },
    methods: {
      submit () {
        if (this.$vuelidation.valid()) {
    window.emailjs.send(
      "service_id",
      "template_id",
      {email: this.email, name: this.name, subject: this.subject, text: this.text},
    );
    return false
        }
      },
    }
  });
</script>