Expense Tracker
- {{ expense }}
const app = Vue.createApp({
data() {
return {
newExpense: ”,
expenses: [],
chartData: {
labels: [],
datasets: [{
label: ‘Expenses’,
data: []
}]
}
};
},
methods: {
addExpense() {
this.expenses.push(this.newExpense);
this.chartData.labels.push(this.newExpense);
this.chartData.datasets[0].data.push(1);
this.updateChart();
},
updateChart() {
const ctx = document.getElementById(‘expenseChart’).getContext(‘2d’);
const chart = new Chart(ctx, {
type: ‘bar’,
data: this.chartData
});
}
}
});
app.mount(‘#app’);
