Использование вспомогательного файла JS для встраивания Typeform в Vue и Laravel

Question

У меня проблема с интеграцией typeform в мой сайт с использованием vue и laravel.

Форма ввода встраивается с помощью скрипта, и Vue не нравится, когда я пытаюсь поместить скрипт непосредственно в компонент, она выдает эту ошибку:

• Шаблоны должны отвечать только за отображение состояния в пользовательский интерфейс.Избегайте размещения в шаблонах тегов с побочными эффектами, например, так как они не будут анализироваться.

В настоящее время я пытаюсь внедрить его в компонент vue с помощью Mounting () метод.Вот мой код:

 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);

}

Я поместил скрипт по указанному URL в методе setAttribute, в моем каталоге public / js.Проблема в том, что при запросе он отображается как 301, а затем как 404.Кроме того, когда я проверяю вкладку «sources», файл tf-merch.js не отображается.

Как мне загрузить скрипт typeform (или любой другой внешний скрипт) в dom,Я могу использовать это typeform в моих компонентах?

Answer 1

Вместо того, чтобы пытаться вставить скрипт в любые div-ы, обрабатываемые Vue, вы можете добавить скрипт в тело. Вы, вероятно, могли бы также сделать это в ловушке созданного ()

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