mailto link using computed property not loading full message body-CodePudding

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  v-html="letterContentToHtml"></p>
<v-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;
            },

CodePudding user response：

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.