Vuejs get component HTML and send it via ajax POST

Question

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)

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

Flame · Accepted Answer · 2019-02-19 13:18:22Z

2

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

edited Feb 19, 2019 at 13:18

answered Feb 19, 2019 at 12:54

Flame

7,7563 gold badges43 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daut · Accepted Answer · 2019-02-19 13:04:01Z

0

EDITED:

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

@Flame is correct, .innerHTML will work.

edited Feb 19, 2019 at 13:04

answered Feb 19, 2019 at 12:48

Daut

2,6851 gold badge23 silver badges33 bronze badges

1 Comment

Christhofer Natalius Over a year ago

The error is gone, but I only get [object HTMLDivElement] in the email

Collectives™ on Stack Overflow

Vuejs get component HTML and send it via ajax POST

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related