Javascript Vue从选择框中@更改后删除当前数据值

我有一个查询，它获取一条记录并将其显示为一个图形。我已经可以显示记录，但当我单击一条没有结果的记录，然后单击上一条有结果的记录时。vue中的

data

属性将当前结果添加到上一个结果之后。我想要的是，当我从

select

标记中选择另一个选项时，当前数据将被删除，并用新的结果替换为当前结果

这是我的图表

当我从选择框中单击

Vince

时，我得到了准确的数据和图形。以下是我的Vue开发工具的详细信息

但是当我点击

标记
第二个没有数据或结果的老师

我上一个数组中的数据仍然在那里，当我点击返回到
vince
中包含数据时，这里就是结果


图表是这样的


我现在的代码是无效的

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

我的原始代码是

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

有人能告诉我哪里不对，我怎样才能实现我想做的事？非常感谢
 每次从这样的服务器接收数据时，都必须清除数据

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

谢谢你的回答。它对我有用。但这是最好的答案吗？如果我选择了其他包含数据的选项，该怎么办。没事吧？