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

Вы можете столкнуться с ошибкой, если хотите запустить тег скрипта только для определенного компонента во Vue.

Попробуем добавить скрипт в шаблон компонента:

<script src="..." ></script>

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

Это простое решение, несмотря на то, что поиск в Интернете может поставить вас на более сложный путь. Просто добавьте type = ”application / javascript” в свой тег скрипта. Фиксированный.

<script type="application/javascript" src="..."></script>

Вы можете перестать читать здесь. Но что, если ваш скрипт содержит document.write. Ваш скрипт не будет работать и выдает следующую ошибку в консоли: «Не удалось выполнить 'write' в 'Document': невозможно выполнить запись в документ из асинхронно загруженного внешнего скрипта, если это явно не указано. открыт. ”

Это происходит потому, что документ был полностью проанализирован и закрыт. Тогда вы не сможете писать ему, по крайней мере, как хотите.

Решить эту проблему можно с помощью postscribe. (см. гиперссылку для других подходов, кроме установки NPM)

npm i postscribe --save

Затем в смонтированном жизненном цикле компонента Vue вы можете добавить тег скрипта следующим образом.

<template>
  <div id="gist"></div>
</template> 
<script>
/* eslint-disable no-useless-escape */
import postscribe from 'postscribe'
export default {  
  name: 'Gist-Example',
  mounted: function () {
    postscribe('#gist', `<script src="https://gist.github.com/gautemo/d6b309c2bafe8f611f239b82f4f5501f.js"><\/script>`)
  }
}
</script>

Поздравляем, теперь вы встроили суть в свой компонент Vue!

Спасибо за чтение!

Не стесняйтесь подписываться на меня в Твиттере на @GauteMeekOlsen

Эта статья изначально была опубликована на gaute.app