The mailto link is properly loading the recipients and subject but it seems to cut off the email body as a very short length. My email is a total of 1500 characters, so I am below the mailto limit. The email seems to be cutting off the body around 200 characters.
I am attaching a computed property to the mailto string because I am using a package called "marked.js" which parses user input to markdown/html.
How do I go about fixing this issue? I have tried setting a new data property as "emailFormat" and on page mount the email body is run through the marked package and then set as a data property. I assumed this would fix the issue because now I am just attaching a string to the mailto body, but this has not worked and i still end up with an incomplete email body.
computed property that takes in the api response data and runs through the marked package
letterContentToHtml() {
if (this.formData.letterContent != null) {
return marked(this.formData.letterContent); // marked is package to parse user input to markdown/html.
}
else {
return null;
}
},
template section that displays the content and a button that includes the mailto href
<p class="email-content-data" v-html="letterContentToHtml"></p>
<v-btn class="send-form-btn"
:disabled="!campaignFormValid || this.emailRecepients == ''"
elevation="12"
color="primary"
target="_blank"
:href="mailToString"
@click="updateCampaignList">
Send Email!
</v-btn>
mailto computed property
mailToString() {
return "mailto:"+this.formData.emailList+"?subject="+this.formData.subject+"&body="+this.emailContent;
},
You must URL-encode your data before assigning it to the HREF property of a hyperlink/anchor tag:
mailToString()
{
return "mailto:" + encodeURIComponent(this.formData.emailList) + "?subject=" + encodeURIComponent(this.formData.subject) + "&body=" + encodeURIComponent(this.emailContent);
},
Otherwise it might interfer with some reserved characters, e.g. ? or = or & or some Unicode character.