javascript - Vuejs 获取组件 HTML 并通过 ajax POST 发送

问题描述

我想发送带有 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(() => {})
    },
}

如果我将 HTML 填充body为 string: '<strong>this should be bold</strong>'，它会按预期工作。所以如果我能得到 HTML，我相信代码会起作用。

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

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

标签： javascriptvue.js

您可以this.$refs.yourRef.$el.innerHTML将内部 HTML 作为字符串返回。

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

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

javascript - Vuejs 获取组件 HTML 并通过 ajax POST 发送

问题描述

解决方案

推荐阅读