Vue.js获取组件HTML并通过Ajax POST发送

Question

我想使用HTML正文发送电子邮件，但是我无权访问服务器代码，只能通过ajax发送电子邮件内容。 该服务器已经具有用于发送电子邮件的API。

我正在动态渲染组件invoiceEmail。

sendEmail () {
    const mailConfig = {
        to      : 'johndoe@example.com',
        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(() => {})
    },
}

如果我用字符串body的HTML填充'<strong>this should be bold</strong>'，它将按预期工作。因此，如果我可以获取HTML，则可以确保代码可以正常工作。

这是console.log(this.$refs.invoiceEmail.$el)

我应该使用什么来获取纯HTML而不是this.$refs.invoiceEmail.$el？

Answer 1

您可以执行this.$refs.yourRef.$el.innerHTML，该操作将以字符串形式返回内部HTML。

也可以扩展一下答案：this.$refs.yourRef.$el返回一个原始DOM对象，就像使用原始Javascript一样document.getElementById('myelement')。

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

Answer 2

已编辑：

尝试像这样this.$refs.invoiceEmail.$el.toString()进行解析。 这不起作用

@Flame是正确的，.innerHTML将起作用。