Tips for bringing in and taking out data in Vue

Question

Tips for bringing in and taking out data in Vue

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.

javascript vue.js

Answer 1

Answer №1

It appears that your code is not correctly rendering the component. Here is how you should modify it:

<template>
    <custom-chart>
    </custom-chart>
</template>

<script>

import CustomChart from '@/components/custom'

export default {
  components: {
    CustomChart
  }
} 

</script>

Ensure that your custom-chart component looks like this:

<template>
        <div id="content">
            <canvas ref="chart_custom"&emdash;></canvas>
        </div>
</template>

<script>

    import Chart from 'chart.js';
    import JQuery from 'jquery'
    let $ = JQuery
    export default {
        name: 'custom-chart',
        mounted() {
            var chart_custom = this.$refs.chart_custom;
            const ctx = chart_custom.getContext("2d");
            const myChart = new Chart(ctx, {
                type: 'line',
    ...
    ...
    ...
</script>

Additionally, consider familiarizing yourself with proper component naming conventions: https://v2.vuejs.org/v2/guide/components-registration.html

Answer 2

It appears that your code is not correctly rendering the component. Here is how you should modify it:

<template>
    <custom-chart>
    </custom-chart>
</template>

<script>

import CustomChart from '@/components/custom'

export default {
  components: {
    CustomChart
  }
} 

</script>

Ensure that your custom-chart component looks like this:

<template>
        <div id="content">
            <canvas ref="chart_custom"&emdash;></canvas>
        </div>
</template>

<script>

    import Chart from 'chart.js';
    import JQuery from 'jquery'
    let $ = JQuery
    export default {
        name: 'custom-chart',
        mounted() {
            var chart_custom = this.$refs.chart_custom;
            const ctx = chart_custom.getContext("2d");
            const myChart = new Chart(ctx, {
                type: 'line',
    ...
    ...
    ...
</script>

Additionally, consider familiarizing yourself with proper component naming conventions: https://v2.vuejs.org/v2/guide/components-registration.html

Tips for bringing in and taking out data in Vue

Answer №1

Similar questions

ESLint and Prettier are butting heads when trying to run their commands consecutively

Utilizing Jquery Validation to Remove a Class Upon Form Validation Success

Parent Route Abstractions in Vue-Router

Tips for retrieving data from a Node.js server with a POST request in a React application

How can I retrieve information on a logged in Auth0 user from an API?

Removing an item from an ng-repeat loop while also dealing with a FormController within

Displaying data on the user interface in Angular by populating it with information from the form inputs

Ways to extend div to fill the rest of the page's vertical space

Is it possible to incorporate a regular JavaScript file into a Vue component?

Guide on updating individual rows in Google App Script using data from a different sheet

Ways to retrieve parameters in getStaticPaths function?

Manage the application of CSS media queries using JavaScript

Is there a way to create an image gallery layout similar to Pinterest using CSS?

The error message "TypeError: Cannot set property 'href' of undefined" occurred at angular.js line 12520 when trying to set $window.location.href

404 Error: JSON POST and GET Request Not Located

Display a tooltip when the cursor hovers close to a line in D3 visualizations

What is the best way to populate a div with multiple other div elements?

What is the most elegant way to retrieve a new item from Firebase and read it?

Limiting Velocity in a Two-Dimensional Spacecraft

The term "Cardlist" has not been defined and is therefore causing an