Mailto link using computed property not loading full message body

Question

The

mailto link loads the recipients and subject correctly, but appears to truncate the email body to a very short length. My email has a total of 1500 characters, so it's under the mailto limit. The body of the email appears to be truncated at approximately 200 characters.

I'm appending a computed property to the mailto string because I'm using a package called "marked.js" which parses user input into markdown/html.

How can I solve this problem? I tried setting the new data attribute to "emailFormat" and running the email body through the tagged package on the page install and then setting it to the data attribute. I thought this would solve the problem because now I just append a string to the mailto body, but that doesn't work and I still get an incomplete email body.

Computed properties that receive api response data and run through tagged packages

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 part showing content and button containing 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;
            },

Answer 1

You must URL encode the data before assigning it to the HREF attribute of the hyperlink/anchor tag:

mailToString()
{
  return "mailto:" + encodeURIComponent(this.formData.emailList) + "?subject=" + encodeURIComponent(this.formData.subject) + "&body=" + encodeURIComponent(this.emailContent);
},

Otherwise it may interfere with some reserved characters, such as ? or = or & or some Unicode characters.