如何在VUE 3路由器中渲染HTML部分

发布于 01-24 07:07 字数 1233 浏览 3 评论 0原文

在我的应用中,我有几页显示一些嵌入式表单...

这些表格来自jotform,并带有这样的JS脚本,

<section>
  <script type="text/javascript" src="https://form.jotform.com/jsform/123124124"</script>
</section>

我找不到将其加载到组件中的方法,所以我正在尝试使用使用简单的HTML部分。有办法这样做吗?

我也尝试使用一个组件,但它不起作用

<script>
  export default {
    data: () => ({

    }),
    mounted() {
      const scripts = [
          "https://form.jotform.com/jsform/123124124124"
        ];
      scripts.forEach(script => {
              let tag = document.head.querySelector(`[src="${ script }"`);
              if (!tag) {
                  tag = document.createElement("script");
                  tag.setAttribute("src", script);
                  tag.setAttribute("type", 'text/javascript');
                  console.log(document.body);
                  setTimeout(function() {
                    document.body.appendChild(tag);
                  }, 500)

              }
          });
    }
  }
</script>



<template>
  <main class="main">
    <h1 class="visuallyhidden">Funding Request</h1>
    <section class="funding">

    </section>
  </main>
</template>

In my apps I have a couple of pages that show some embedded forms...

The forms come from jotform, and are embedded with a js script like this

<section>
  <script type="text/javascript" src="https://form.jotform.com/jsform/123124124"</script>
</section>

I cannot find a way to load this inside a component, so I'm trying to use a simple HTML partial. Is there a way to do this?

I try also with a component but it doesn't work

<script>
  export default {
    data: () => ({

    }),
    mounted() {
      const scripts = [
          "https://form.jotform.com/jsform/123124124124"
        ];
      scripts.forEach(script => {
              let tag = document.head.querySelector(`[src="${ script }"`);
              if (!tag) {
                  tag = document.createElement("script");
                  tag.setAttribute("src", script);
                  tag.setAttribute("type", 'text/javascript');
                  console.log(document.body);
                  setTimeout(function() {
                    document.body.appendChild(tag);
                  }, 500)

              }
          });
    }
  }
</script>



<template>
  <main class="main">
    <h1 class="visuallyhidden">Funding Request</h1>
    <section class="funding">

    </section>
  </main>
</template>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

蔚蓝源自深海 2025-01-31 07:07:33

如建议在这里您可以尝试要使用iframe版本: https://www.jotform 。

​//www.jotform.com/answers/1893186-how-to-embed-abed-a-form-in-a-vuejs-page“ rel =“ nofollow noreferrer”>在这里),所以您可能会尝试去对于iframe版本,如果适用于您:)

As suggested here you can try to use the iFrame version: https://www.jotform.com/help/148-getting-the-form-iframe-code/

FYI: including an embed script within a dynamic vue component is not an easy thing (as the JotForm support explaned here), so you might try to go for the iFrame version if it works for you :)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文