The graph is displayed and everything is fine, but I don't understand how to transfer my values entered in the input to it.
the update seems to be correct, but if I update it, nothing changes, and the data is not updated
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})
}
}
As per the documentation of vue-chartjs you shouldnt include a template tag in the component you render your chart in because that wont work:
Template Tag can not be merged
Do not include the <template> tag in your .vue single-file components.
Vue can not merge templates.
If you add an empty <template> tag, Vue will take the template from your component and not from the extended one, which will result in an empty template and unexpected errors.
So you will need to make a child component for your chart in which you dont include a script tag that you include in your main file