I have a set of files called total.vue and completeness.vue. I aim to display the chart from total.vue within completeness.vue, which is my designated admin dashboard where I plan to feature 2 or 3 additional charts.
For this task, I will be exporting content from total.vue
<script>
import Chart from 'chart.js';
import JQuery from 'jquery'
let $ = JQuery
export default {
name: 'total_chart',
mounted() {
var chart_total = this.$refs.chart_total;
const ctx = chart_total.getContext("2d");
const myChart = new Chart(ctx, {
type: 'bar',
...
...
...
</script>
Within completeness.vue, I will then proceed to import as follows:
<template>
<div id="total_chart">
<div id="content">
<canvas ref="chart_total"></canvas>
</div>
</div>
</template>
<script>
import chart_total from '@/components/total'
export default {
components: {
chart_total
}
</script>
Despite my efforts, I am not getting any output when accessing the route originally assigned to completeness.vue.
Any suggestions on how to troubleshoot this issue would be greatly appreciated.
Thank you for your assistance.