CODEWITHSUNDEEP
javascriptvue.js
Christhofer Natalius
Christhofer Natalius

Reputation: 3398

Vuejs get component HTML and send it via ajax POST

I want to send email with HTML body, but I don't have access to server code, I can only send the email content via ajax. The server already has API to send email.

I have the component invoiceEmail rendered on the fly.

sendEmail () {
    const mailConfig = {
        to      : '[email protected]',
        subject : 'Your Invoice',
        // body    : this.$refs.invoiceEmail.$el, // this doesn't work
        // I'm getting error "converting circular structure to json"
        body    : '<strong style="color:red;">red bold</strong>', // this works
    }
    this.$api.POST('send-email', mailConfig)
        .then(response => {})
        .catch(error => {})
        .finally(() => {})
    },
}

If I fill body with HTML as string: '<strong>this should be bold</strong>', it works as expected. So if I can just get the HTML, I'm sure the code will work.

This is console.log(this.$refs.invoiceEmail.$el)

enter image description here

What should I use to get the plain HTML instead of this.$refs.invoiceEmail.$el ??

Upvotes: 2

Views: 543

Answers (2)

Flame
Flame

Reputation: 7628

You can do this.$refs.yourRef.$el.innerHTML which returns you the inner HTML as a string.

Also just to expand this answer a little bit: this.$refs.yourRef.$el returns a raw DOM object, just as you would have as if you'd do document.getElementById('myelement') with raw Javascript.

https://developer.mozilla.org/en-US/docs/Web/API/Element

Upvotes: 2

Daut
Daut

Reputation: 2645

EDITED:

Try parsing it like so this.$refs.invoiceEmail.$el.toString(). this will not work

@Flame is correct, .innerHTML will work.

Upvotes: 0

Related Questions