使用辅助 JS 文件在 Vue 和 Laravel 中嵌入 Typeform答案

【问题标题】：Using helper JS file to embed Typeform in Vue and Laravel使用辅助 JS 文件在 Vue 和 Laravel 中嵌入 Typeform
【发布时间】：2019-04-01 04:24:30
【问题描述】：

我在使用 vue 和 laravel 将 typeform 集成到我的网站时遇到问题。

typeform 嵌入了一个脚本，当我尝试将脚本直接放在组件中时，Vue 不喜欢它，它会抛出这个错误：

模板应该只负责将状态映射到 UI。避免在模板中放置带有副作用的标签，例如，因为它们不会被解析。

目前，我正在尝试使用 Mounted() 方法将其注入到 vue 组件中。这是我的代码：

 mounted() {
    var ts = document.createElement('script')
    ts.setAttribute('src','http://applyingawareness.com/public/js/typeformScripts/tf-merch.js');
    var tfDiv = document.getElementById('typeform');

    tfDiv.insertAdjacentElement('afterend',ts);

}

我将脚本放置在我的 public/js 目录中 setAttribute 方法中的指定 Url 处。问题是，它在请求时显示为 301，然后显示为 404。此外，当我检查“来源”选项卡时，tf-merch.js 文件没有显示出来。

如何将 typeform 脚本（或任何外部脚本）加载到 dom 中，以便我可以在我的组件中使用它 typeforms？

【问题讨论】：

标签： javascript laravel vue.js vuejs2 vue-component

【解决方案1】：

您可以将脚本附加到正文中，而不是尝试将脚本插入到 Vue 处理的任何 div 中。您可能也可以在 created() 挂钩中执行此操作

let script = document.createElement('script')
script.src = 'http://applyingawareness.com/public/js/typeformScripts/tf-merch.js'
document.body.appendChild(script)

【讨论】：