Как интегрировать скрипт Bitrix в компонент Vue?

Как можно отобразить в компоненте Vue скрипт, содержащий форму обратной связи?
  • 6 марта 2024 г. 23:18
Ответы на вопрос 2
Для интеграции скрипта Bitrix в компонент Vue, нужно сначала подключить скрипт самого Bitrix к проекту Vue. Это можно сделать, добавив скрипт в разделе mounted компонента Vue или в блоке script веб-страницы. Например:

mounted() {
    const script = document.createElement('script');
    script.src = 'https://адрес_к_скрипту_bitrix';
    document.body.appendChild(script);
}

После подключения скрипта Bitrix, можно создать компонент Vue, в котором будет отображаться форма обратной связи. Например, можно вставить HTML-код формы непосредственно в шаблон компонента Vue. 

Пример компонента Vue с формой обратной связи:

<template>
  <div>
    <h2>Форма обратной связи</h2>
    <form action="https://адрес_для_обработки_формы">
      <input type="text" name="name" placeholder="Имя">
      <input type="email" name="email" placeholder="Email">
      <textarea name="message" placeholder="Сообщение"></textarea>
      <button type="submit">Отправить</button>
    </form>
  </div>
</template>

<script>
export default {
  name: 'FeedbackForm',
}
</script>

Таким образом, интеграция скрипта Bitrix в компонент Vue и отображение формы обратной связи в компоненте Vue будет происходить путем подключения скрипта Bitrix к проекту Vue и добавления HTML-кода формы в шаблон компонента Vue.
Например положить его в отдельный файл и подгрузить динамически. Примерно так 

const scripts = [
  "js/script1.js",
  "js/script2.js"
];
scripts.forEach(script => {
  let tag = document.head.querySelector(`[src="${ script }"`);
  if (!tag) {
    tag = document.createElement("script");
    tag.setAttribute("src", script);
    tag.setAttribute("type", 'text/javascript');
    document.head.appendChild(tag); 
  }
});


Есть еще плагин vue-plugin-load-script https://github.com/tserkov/vue-plugin-load-script?...
Похожие вопросы