CODEWITHSUNDEEP
javascriptarraysvue.js
draw134
draw134

Reputation: 1187

Vue delete current data values after @changed from select box

I have a query that gets a record and display it to a graph. I can already display the records but when I click a record without a result and then click the previous with a result. The data property in vue adds the current result resulting to append the previous one. What I want is when I select another option from the select tag, the current data will be deleted and will be replaced with the current result with the new one.

Here is my Graph enter image description here

When i clicked Vince from the select box I got the exact data and the graph. here is my Vue devtools details

enter image description here

But when I click mark the second teacher which has NO data or result enter image description here

the data from my previous array is still in there and when I click back to vince which has a data in it here is the result

enter image description here

and the graph is like this

enter image description here

My code right now is which is not working

   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);
                            });
                            }
                        })
                }

My original code is this

     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)
                        })
                }

Could someone tell me what is wrong and how could I achieve what i want to do? Thanks a lot.

Upvotes: 0

Views: 125

Answers (1)

Qonvex620
Qonvex620

Reputation: 3972

You have to clear your data everty time you recieved data from the server like this one.

 axios.get('/getGraph/' + self.teacher)
        then(({
                            data
        }) => {
        self.dataSource.data = []
        data.date.forEach(x => {
            self.dataSource.data.push(x);
        });
 })

Upvotes: 1

Related Questions