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结合通过电子邮件提交联系表单的示例

<div class="selected-radio"><img src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5a985a90ec8f79000104514a_united-kingdom.svg">
</div>
<div class="container">
	<div id="radios">
		<label for="usa">
			<input type="radio" name="mode" id="usa" value="usa" checked/>
			<span><img src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5a2f052996bde90001f96632_united-states-of-america.svg"><span>
		</label>
		<label for="canada">
			<input type="radio" name="mode" id="canada" value="canada" />
			<span><img src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5a2cd7b0937442000184b147_canada.svg"><span>
		</label>
		<label for="uk">
			<input type="radio" name="mode" id="uk" value="uk" />
			<span><img src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5a985a90ec8f79000104514a_united-kingdom.svg"><span>
		</label>
	</div>
</div>

不知道如何使用vuejs的emailjs

1 个答案: