Включить внешний скрипт bootstrap.js в однофайловые компоненты Vuejs

Я использую несколько внешних библиотек для построения диаграмм с подсказками в приложении vue. Я использую однофайловые компоненты

У меня есть рабочая скрипка, но я не смог перевести ее в рабочий компонент.

Методы попытки:

  1. Загрузите 3 сценария с подсказками в <head> тег

    • "TypeError: tooltipAnchor.tooltip is not a function"

  2. Загрузите 3 сценария с подсказками в <body> тег перед тегом для скомпилированного кода VUE (build.js)

    • "TypeError: tooltipAnchor.tooltip is not a function"

  3. Загрузите 3 сценария с подсказками в Chart.vue компонент в mounted крюк

    • "TypeError: tooltipAnchor.tooltip is not a function"

Chart.vue:

mounted: function mounted() {
  this.loadJS('https://code.jquery.com/jquery-3.2.1.slim.min.js')
  .then(() => {
    console.log('jquery loaded');
    return this.loadJS('https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js');
  })
  .then(() => {
    console.log('popper loaded');
    return this.loadJS('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js')
  })
  .then(() => {
    console.log('bootstrap loaded');
    this.buildChart();
  });
},
methods: {
  loadJS: function loadJS(url) {
    return this.$http.get(url);
  }
  ...
}

  1. Требуются все три сценария в верхней части Chart.vue:

    • Bootstrap не может загрузить, потому что jQuery ему не доступна глобальная переменная

Я подозреваю, что что-то не так с порядком загрузки скриптов, когда я помещаю их в index.html, но я не могу сказать, что. Кто-нибудь знает, как jsfiddle компилирует свой HTML? Что еще мне не хватает?

Источник

2 ответа

Решение

Наконец-то нашли решение:

Включить JQuery в index.html:

<body>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <div id="app"></div>
  <!-- inject:js -->
  <script src="/js/build.js"></script>
  <!-- endinject -->
</body>

и импортировать / требовать начальной загрузки в компоненте vue Chart.vue:

<template>
    <div id="chart"></div>
</template>
<script type="text/javascript">
  var d3 = require('d3');
  var Plottable = require('plottable');
  var bootstrap = require('bootstrap');

...

Метод, который создает & обновляет всплывающие подсказки, теперь работает как ожидалось.

Источник

Кажется, что вы делаете запросы ajax к этим файлам JS, однако вы ничего не делаете с ответом? Лучший способ сделать это будет

  1. скачать файлы локально
  2. поместите их в ту же директорию, что и ваш файл
  3. импортировать локальные файлы прямо над вашим компонентом

`` `

<script>
  // assuming you're using a transpiler? use appropriate syntax here
  import './popper.min'
  import './bootstrap.min';

  var vm = new Vue({
  el: '#app',
  data: {
    data_2017: [{
    x: '6th Grade',
    y: 12
  }, // ...

`` `

Источник
Другие вопросы по тегам