Menu
I'm using several external libraries to build charts with tooltips within a vue app. I'm using single-file components
I've got a working fiddle, but haven't been able to translate it into a working component.
Load the 3 tooltip-realted scripts in the <head> tag
"TypeError: tooltipAnchor.tooltip is not a function"Load the 3 tooltip-realted scripts in the <body> tag, before tag for compiled vue code (build.js)
"TypeError: tooltipAnchor.tooltip is not a function"Load the 3 tooltip-realted scripts in the Chart.vue component in the mounted hook
"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);
}
...
}
Require all three scripts at the top of Chart.vue:
jQuery isn't a global variable available to itI suspect something is wrong with the order scripts are loading when I put them in index.html, but I cannot tell what. Does anyone know how jsfiddle compiles its html? What else am I missing?
619
Add a script tag inside your Vue component template. This is the easy fix I have found. Just add the script into the component template. But don't forget to add, type="application/javascript" to the script tag otherwise it will show an error during the build. However, if you have added document.
Bootstrap-Vue not only supports the Bootstrap components and grid system, but also includes support for Vue. js Directives, which gives us the full feature set from the Vue. js ecosystem. One of the cool features of Bootstrap-Vue is that it has an online Playground.
Install bootstrap as you would any other JS module in the Vue project using npm install or by adding it to the package. json ... Next, add the Bootstrap CSS and JS components to the Vue project entrypoint (ie: src/main.
Finally found the solution:
Include jquery in 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>
and import/require bootstrap in the vue component Chart.vue:
<template>
<div id="chart"></div>
</template>
<script type="text/javascript">
var d3 = require('d3');
var Plottable = require('plottable');
var bootstrap = require('bootstrap');
...
The method that creates & updates tooltips now works as expected.
189
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With