Nuxt.js 使用 Typeform 导致我强制重新加载页面

Question

我正在制作自己的个人网页设计网站，但我无法解决这个问题。

它是如何发生的：当我从任何页面导航到我的联系页面（Typeform 所在的页面）时，Typeform 根本不显示。当我 重新加载 联系页面本身时，它按预期工作。

我正在以这种方式加载 Typeform 脚本： contact.vue

head () {
        return {
            script: [
                { src: 'https://embed.typeform.com/embed.js' }
            ]
        }
    }

我以这种方式将其嵌入到模板中：

<div class="typeform-widget" data-url="https://url-to-my-form" 
                    data-transparency="50" data-hide-headers=true data-hide-footer=true
                    style="width: 100%; height: 500px;"></div>
                <div style="font-size: 12px;color: #999;opacity: 0.5; padding-top: 5px;"></div>

我正在按照他们提供的所有步骤进行操作，但它似乎不起作用... 我的控制台中也出现以下错误，但我认为它们无关紧要，因为当我重新加载联系页面时该表单有效：

[Report Only] Refused to frame 'https://aaron479753.typeform.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors https:".


GET https://cdn.segment.com/analytics.js/v1/9at6spGDYXelHDdz4r0cP73b3wV1f0ri/analytics.min.js net::ERR_BLOCKED_BY_CLIENT

注意：我在本地主机上开发，所以这就是未启用 HTTPS 的原因。

提前致谢！亚伦

编辑： the form when I reload the page

the form when I go to (for example) /home and then back to /contanct

Answer 1

我使用 jgmullor 提供的 NPM 包解决了这个问题，这解决了这个问题！

https://www.npmjs.com/package/nuxt-typeform

Nuxt.js 使用 Typeform 导致我强制重新加载页面

Nuxt.js with Typeform causes me to force reload page

javascript

vue.js

nuxt.js

typeform