Vue how to update Pie Chart via input?

Question

Vue.js

For the first time I use Chart and I don’t understand how to force the chart to be updated depending on the data.
Here is the chart code

import { Pie } from 'vue-chartjs'

export default {
  extends: Pie,

  mounted () {
    this.renderChart({
      labels: ['USD', 'ETH', 'BTC'],
      datasets: [
        {
          backgroundColor: [
            '#FFA500',
            '#6495ED',
            '#B22222',
    
          ],
          data: [1,2,3]

        }
      ]

    }, {responsive: true, maintainAspectRatio: false})
  }
}

And here is a slightly shortened but vue page code

<template>
        <div class="buttom__prof">
          <input v-model.number="myMoney" />
          <div class="div__but">
            <button class="but" @click="addMoney">Add</button>
            <button class="but" @click="takeMoney" >Take</button>
          </div>
        </div>

      <div class="info__div">
        <div class="state__line">
          <h1 style="text-align:center;">USD: {{this.USD}}</h1>
        </div>
        <div class="char__div">
          <pie-example></pie-example>
        </div>
      </div>
      <div class="value__div">
        	<div class="value__money">USD: {{USD}}</div>
        <div class="value__money">ETH: {{ETH.toFixed(4)}}</div>
        <div class="value__money">BTC: {{BTC.toFixed(5)}}</div>
      </div>
</template>

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.BTC -= this.myMoney * 0.000017
    	},


  }
}

I don’t quite understand how to access datasets so that when I click on take or add, the chart is updated and gives the values ​​of USD, ETH, BTC

Answer 1

Have you tried opening the documentation? There is an answer to your question .
You make a calculated property that will contain labels and datasets, pass its value to the chart component under the name chartData. In the component itself, you pass this chartData to renderChart. For example .