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

Transmit parameters via onclick event on FullCalendar

I have been utilizing the full calendar feature and it's been functioning properly. However, I am encountering an issue with sending parameters via onclick event. Below is the JavaScript code that I currently have: <script> $(document).ready(fu ...

Is it feasible to trigger a dialog box by clicking on a textField within MaterialUI?

Is there a way to create a clickable textField that opens a dialog box for users to input more text? I'm specifically looking for a solution using MaterialUI. Currently, I have a workaround where a button is displayed to open the dialog box instead o ...

Encountering a Project Oxford error - HTTP 404 while trying to access Computer Vision API with Javascript

I am attempting to retrieve JSON data from Microsoft Project Oxford via an API call. Despite following the API reference, I encounter a 404 error when making the call. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">< ...

Purging browser cache with the help of jQuery or AngularJS

I am currently working on clearing the browser cache through programming. This is necessary because I have updated the application to a new version, but the browser continues to display the old version and content stored in the cache. I want to ensure that ...

Reactjs - Creating a video component with a placeholder that loads the video seamlessly

I created a Video component that utilizes the React.Suspense component to show a placeholder while the video is loading. However, I'm facing an issue where it seems like the functionality isn't working as intended. When I set the network to "slow ...

Content displayed in the center of a modal

Struggling to center the captcha when clicking the submit button. Check out the provided jsfiddle for more details. https://jsfiddle.net/rzant4kb/ <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class=" ...

Discovering the Method to Place a File into a Concealed Input Field Using Vue

I am currently in the process of previewing an image, and I want to find a way to return the file to my form for later submission on the backend. However, I am unsure of how to achieve this. Here is the code for my component: <template> <div> ...

Preserve Vue router nested components even after navigating to different pages

Need help with this problem: https://jsfiddle.net/guanzo/myn5o94e/1/ The app defaults to /bar. When you click on "Go to bar child", it goes to /bar/barchild and shows the BarChild component. Clicking on "Go to Foo" navigates to /foo. If you then click on ...

Floating navigation bar that appears and disappears as you scroll

My webpage has a dynamic navbar that consists of two parts: navbarTop and navbarBottom. The navbarTop should appear when the user has scrolled down more than 110 pixels, while the navbarBottom should show up when the user scrolls up. The issue I am facing ...

Extracting data from a targeted external source using PHP

Currently, I am attempting to extract data from a certain site using PHP, yet it appears that the specific information I seek is dynamically generated through Javascript or a similar technology. Any advice on how I should proceed would be greatly appreciat ...

ScriptManager is not accessible in the current ASP.Net Core Razor Page context

I'm facing an issue where I have a view (such as Index.cshtml) and a page model (like Index.cshtml.cs). In the view, there's a JavaScript function that I want to call from the OnPost() method in the page model. I tried using ScriptManager for thi ...

Ways to dynamically emphasize text within ngFor loop

Within my ngFor loop, I have a set of rows. <div *ngFor="let block of data;"> <div class="class-row"> <div class="left">A Label:</div> <div class="right">{{block.key1}}</div> </div> <div class="clas ...

retrieve the value of a text form using jQuery and its corresponding id

I need help with a basic HTML form that includes jQuery. My goal is to: 1) Retrieve the value into a JavaScript variable. 2) Send it as JSON to a server. Here is the form: <div data-role="main" class="ui-content"> <data=role "form" ...

Displaying the Yii form directly on the page upon loading, rather than enclosed within a jQuery dialog box

After studying this yii wiki page, I encountered an issue where the form is supposed to appear within a jQuery dialog box, but it opens immediately when the page loads instead. Upon further investigation, I discovered that removing the success callback fr ...

The error middleware in Express is not defined

I'm facing an issue where the Express API error messages are returning as undefined on the frontend. This is preventing me from displaying proper error messages to alert users. Interestingly, the error messages seem to appear fine in the developer to ...

ui-jq flot graph with lazy loading

I am working with this HTML code: <div id="test" ui-jq="plot" ui-options=" [ { data: {{line}}, points: { show: true, radius: 6}, splines: { show: true, tension: 0.45, lineWidth: 5, fill: 0 }, label: 'Akademi' }, ], { ...

Creating a versatile tabbed interface with Vue.js for multiple uses

I am currently working on integrating a tabbed reusable component in vueJs, but I encountered an issue stating that a specific component is not defined. Below, you will find the code snippets for both components: //TabComponent <template> <di ...

Tips on accessing the v-model value with a parameter in VUE

Looking to access the v-model value using a parameter, I attempted the following code: <template> <div v-for="(item, idx) in data"> <input :id="item" :v-model="item"></input> <button @click=&q ...

Save modified content in CKEditor to an HTML document

Currently, I am utilizing the Ajax success function to dynamically load the content from an HTML file into CKeditor. function retrieveFileContent(fileUrl) { $.ajax({ url: fileUrl, success: function (data){ ...

Exploring ways to loop through a JSON array and embed it into an HTML element

After the ajax request, the data returned is structured as follows: Data = [ ["18/02/2019", "A"], ["19/03/2019", "B"], ["21/05/2019", "C"], ] The ajax request was successful and the data is stored in a variable named Data within a function. ...