Question

我在使用vue和laravel将排版形式集成到我的网站时遇到问题。

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文件没有显示。

如何将类型脚本（或与此相关的任何外部脚本）加载到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)

使用辅助JS文件将Typeform嵌入Vue和Laravel

1 个答案: