使用帮助器JS文件在Vue和Laravel中嵌入Typeform

Question

我在使用vue和laravel将一个字体集成到我的网站时遇到了问题。

类型表嵌入了一个脚本，当我尝试将脚本直接放在组件中时，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);

}

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

如何将字体脚本（或任何外部脚本）加载到dom中，以便在组件中使用它？

Answer 1

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

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