Блог

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

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

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

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

  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 методе в моем общедоступном каталоге / js. Проблема в том, что при запросе он отображается как 301, а затем как 404. Кроме того, когда я просматриваю вкладку «источники», tf-merch.js файл не отображается.

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

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

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