If you are working with Vue, it is recommended to avoid using the document interface functions like getElementById. Instead, utilize text interpolation with double curly braces as it follows the "Vue way". In your codepen example, there are two main issues that need addressing.
Firstly, you are attempting to display {{data}} without actually defining a data variable. The data option structure should look something like this:
data() {
return {
...
}
}
This allows you to define variables that can be directly used in your HTML with {{}}. It's important to choose meaningful names for your variables, such as perhaps renaming "data" to "cardText". Update the value of this variable within your click method and then display it in your HTML using the {{}} syntax.
data() {
return {
chart: {},
series: [],
chartOptions: {},
cardText: ''
}
},
...
selectBar(event, chartContext, config) {
this.cardText = this.series[0].data[config.dataPointIndex]
}
<div>{{ cardText }}</div>
The second issue is trying to display this data outside of your Vue instance. When creating the Vue instance, make sure to specify the element where Vue will attach, like this:
new Vue({
el: "#app",
...
})
The #app refers to the element that the Vue instance will control. Vue only has direct influence over content inside this element, but you are trying to display {{data}} outside of it, within a <b-card> element. Simply move this code inside the <div id="app">.
For further clarification, refer to the official Vue documentation. It provides comprehensive information to enhance your understanding and utilization of the Vue framework.