javascript - 带有 Typeform 的 Nuxt.js 导致我强制重新加载页面

Question

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

它是如何发生的:
当我导航 从任何页面到我的联系页面(Typeform 所在的位置)，Typeform 根本没有显示。当我重新加载 联系页面本身，它按预期工作。

我正在以这种方式加载 Typeform 脚本:
联系.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