There appears to be an issue with displaying the graph

I am having trouble understanding how to transfer the values entered in the input to the graph that is displayed successfully.

Although the update seems correct, nothing changes when I try to update it and the data remains stagnant.

Page.vue

<script>

  import PieExample from '../components/PieExample'

  export default {
    components: {
      PieExample,
    },
    data () {
      return {
        myMoney: null,
        USD: 0,
        ETH: 0,
        BTC: 0
      }
    },
    methods: {
        addMoney() {
            this.USD += this.myMoney;
            this.ETH += this.myMoney * 0.0003;
            this.BTC += this.myMoney * 0.000017;
        },
        takeMoney() {
            this.USD -= this.myMoney;
            this.ETH -= this.myMoney * 0.0003;
            this.BCT -= this.myMoney * 0.000017;
        },
    },

  }
</script>

PieExample.js

import { Pie } from 'vue-chartjs'

export default {
  extends: Pie,

  mounted () {
    this.renderChart({
      labels: ['backs', 'uin', 'Rub'],
      datasets: [
        {
          backgroundColor: [
            '#41B883',
            '#E46651',
            '#00D8FF',
    
          ],
          data: [1, 1, 1]
        }
      ]
    }, {responsive: true, maintainAspectRatio: false})
  }
}

Answer №1

According to the guidelines provided on vue-chartjs, it is advised not to include a template tag in the component where you render your chart, as it will not function correctly:

Avoid Including Template Tag

It is recommended not to use the <template> tag in your .vue single-file components. 
Vue cannot combine templates.
By adding an empty <template> tag, Vue will prioritize the template within your component instead of the extended one, leading to unexpected errors and an empty template being rendered.

Therefore, it is suggested to create a separate child component specifically for your chart without including any script tags that may be present in your main file.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to scan through Vue and React component-based web applications?

I am facing an issue when trying to crawl my Single Page Application (SPA) created with the Vue framework, which is similar to React. Despite my efforts, the content does not appear to be rendered during the crawling process. Here is the result I am gettin ...

What is the best way to determine the position of a letter within a string? (Using Python, JavaScript, Ruby, PHP, etc...)

Although I am familiar with: alphabet = 'abcdefghijklmnopqrstuvwxyz' print alphabet[0] # outputs a print alphabet[25] #outputs z I am curious about the reverse, for instance: alphabet = 'abcdefghijklmnopqrstuvwxyz' 's' = al ...

After modifying the select option, the input field remains disabled

I successfully developed a self-contained code snippet that toggles the enable/disable state of input fields. It works flawlessly on my HTML page. Check it out below: Identification Type: <select name="Identification-Type" id="Identification-Type"& ...

Design a background image that is optimized for both high-resolution retina displays and standard non-ret

Scenario I am working on a web page where I want the background image to be fixed, covering the entire screen or window (excluding tablets and smartphones). The background image has been created using ImageShack. Everything is running smoothly so far. T ...

Paper.js: Is there a way to prevent canvas height and width from changing when the window is resized?

My canvas with paperjs is set up to resize dynamically when the window is resized. I appreciate any help in advance. HTML <canvas id="myCanvas" height="800" width="1000"></canvas> JS var Initialize = function () { var canvas = document ...

Is there a way to display the drawer component from Material UI only on specific routes using routing in ReactJS with MaterialUI?

In my react project, I have implemented a material-UI drawer component. The issue I am facing is that the drawer component contains the page content within itself. Previously, I managed to integrate routes using react-router-dom with the drawer. My current ...

Adjust the width of a div element based on a data property in Vue using animations

I am currently working on a progress bar div that has its width tied to a data property called "result" and adjusts accordingly. However, the transition is still abrupt and I would like to add some animation to it. I have considered using CSS variables o ...

Step-by-step guide to creating a dynamic button that not only changes its value but also

I am trying to implement a translation button on my website that changes its value along with the text. Currently, I have some code in place where the button toggles between divs, but I am struggling to make the button value switch as well. Given my limit ...

When using Node.js, you may encounter the error message: "TypeError: brevo.ApiClient is not a constructor

My goal is to set up an automatic email sending system that, upon receiving details like name and email, will send a confirmation email to the provided email address with the message "subscribed." I've been working on this task for about 7 hours strai ...

Preserving the most recent choice made in a dropdown menu

Just started with angular and facing an issue saving the select option tag - the language is saved successfully, but the select option always displays English by default even if I select Arabic. The page refreshes and goes back to English. Any assistance o ...

Limiting access in _app.js using Firebase and Redux

In my application, users can access the website without logging in. However, they should only be able to access "/app" and "/app/*" if they are authenticated. The code I have written seems to work, but there is a brief moment where the content of "/app" ...

Retrieve the jQuery widget instance by selecting an element within the widget

I am currently developing a widget using the Jquery widget factory. The abbreviated version of the code looks something like this: _create: function(){ this.element.hide(); //hides original input element this.newInput=$("<input>"); //creates ...

angular data binding returning the identifier instead of the content

I have been dealing with managed fields retrieved from a web server in the following format: { "fields":{ "relationshipStatus":[ { "fieldId":4, "name":"Committed" }, { "fieldId":2, ...

Steps to automatically navigate to a specific Div upon page initialization

Can someone help me understand why my code is scrolling to a div and then returning back to the top of the page? $("#Qtags").click(function(){ $('html, body').animate({'scrollTop' : $($(this).attr('href')).offset().top}, ...

Using a Python list as an argument in a JavaScript function

How can I pass a python list as an argument to a JS function? Every time I attempt it, I encounter the error message "unterminated string literal". I'm baffled as to what's causing this issue. Here is my python code (.py file): request.filter+= ...

How to retrieve the column names of a table using Web SQL?

Working on extracting column lists from Web SQL (Chrome's local database). One approach is to gather information from sqlite_master. SELECT name, sql FROM sqlite_master WHERE type="table" AND name = "'+name+'"; As an example, here is a sam ...

Using jQuery to verify the presence of an element, especially one that may have been dynamically inserted via AJAX

I have a good understanding of how to verify elements that are present when the document is loaded: jQuery.fn.exists = function () { return jQuery(this).length > 0; } However, this approach does not detect elements that are dynamically added via A ...

Using the goBack function in React Router does not add the previous location to the stack

In React Router v4, I have a list page and a details page in my web application. I want to implement a 'Save and close' button on the details page that redirects the user back to the list page when clicked. However, I noticed that after the user ...

The module '@algolia/cache-common' is missing and cannot be located

summary: code works locally but not in lambda. My AWS lambda function runs perfectly when tested locally, utilizing Algolia within a service in the server. Despite installing @algolia/cache-common, any call to the lambda results in a crash due to the erro ...

What are the steps to resolve the issue "Error: no valid exports main found" specifically on a Windows 7 operating system?

I've been encountering an issue while attempting to run my react app on Windows 7 OS. I have npm version 6.13.4 and node version 13.6.0 installed on my system. Every time I try to start the application using npm start, I receive the following error co ...