I am facing an issue with my code where the data property in Vue.js appends the current result to the previous one instead of replacing it when a new option is selected from the select tag. I want the current data to be deleted and replaced with the newly selected result each time.
Shown below is the graph:
https://i.sstatic.net/LNKO6.pngWhen I click on Vince from the select box, I receive the correct data and display on the graph as well. Here are the details from Vue devtools:
However, when I click on Mark, a teacher for which there is no data available, the previous array's data remains intact. Even after clicking back on Vince, the old data persists. The following results and graph show this scenario:
The current code that I have tried is not working as expected. Below is the snippet of the code:
getdata() {
let self = this
axios.get('/getGraph/' + self.teacher)
.then(({
data
}) => {
if(data.length > 0){
data.splice()
}
else{
data.date.forEach(x => {
self.dataSource.data.push(x);
});
}
})
}
Here is my original code for reference:
getdata() {
let self = this
axios.get('/getGraph/' + self.teacher)
.then(({
data
}) => {
data.date.forEach(x => {
self.dataSource.data.push(x);
});
})
},
getTeachers() {
axios.get('getTeachers')
.then((res) => {
this.teachers = res.data
})
.catch((e) => {
console.log(e)
})
}
I would greatly appreciate any insights on what might be wrong with my code and how I can achieve the desired functionality. Thank you!