小编Pau*_*ray的帖子

我有一个 vue 组件，它实现了 vue-chartjs 的 Horizo​​ntalBar 组件，我将其渲染为 bootstrap-vue 表中的单元格。我的愿望是让图表保持固定的高度，但随着窗口的增大/缩小而水平缩放。

当页面首次加载时，图表播放得很好，但在调整大小以覆盖页面上的其他元素时，图表会不受控制地增长。

我怎样才能让他们做出正确的反应而不让他们去不该去的地方？我还想确保它们实际上占据了它们所在的表格单元格的范围，而不是奇怪地停止了几个像素。

这是我的相关组件代码：

<script>
import { HorizontalBar } from "vue-chartjs";
import Constants from "../../services/Constants";

export default {
  name: "ResponseGraph",
  extends: HorizontalBar,
  props: { /* some props */ },
  data: () => ({
    chartData: {},
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        xAxes: [{ stacked: true, display: false }],
        yAxes: [{ stacked: true, display: false }]
      },
      legend: {
        display: false
      },
      tooltips: {
        enabled: false
      }
    }
  }),
  mounted() { …

我有一个动态电子邮件模板，用于向用户发送唯一的令牌链接以重置其密码。我将链接分配给请求对象中个性化的dynamic_template_data 部分中名为“link”的字段。当我收到电子邮件时，我的锚标记没有 href 属性。

这是我的请求对象：

{
        method: "POST",
        url: "/v3/mail/send",
        headers: {
          "content-type": "application/json"
        },
        body: {
          personalizations: [
            {
              to: [{ email: email, name: name }],
              dynamic_template_data: {
                link: link
              }
            }
          ],
          // some other content
          // ...
          template_id: Constants.EMAIL.RESET_PASSWORD
        },
        json: true
      }

以及我的 sendgrid 动态模板中的 html：

<div>Use the following link to reset your password: <a href="{{link}}">{{link}}</a></div>

当我收到电子邮件时，链接的文本已正确填充我的动态内容，但该元素没有 href 属性，因此它呈现为纯文本且不可单击：

特别奇怪的是，当我在 SendGrid 的设计编辑器上预览动态模板时，href 字段会正确填充我传入的测试数据。